html - 使用imgix和html链接获取视网膜图像

我正在使用imgix来存储我的图像。他们有一个很好的库，可以以正确的大小和像素密度提供jpeg。但是，当我需要向这些图像添加链接时，它不起作用。

这是小提琴和代码：
jsfiddle.net/L95suygs/1/

<style>
...
.feature-img {
    width:23%;
    margin:0 1% .5em;
    height:320px;
    float:left;
    overflow: hidden;
    text-align: center;
    overflow:hidden;
}
@media (max-width:1024px){
    .feature-img {
        width:48%;
        margin:0 1% .5em;
    }
}
@media (max-width:480px){
    .header-img{
        width:100%;
        margin:0 0 .5em 0;
    }
    .feature-img {
        width:100%;
        margin:0 0 .5em;
        height:200px;
    }
}
</style>

<div class="container" id="example1">
    <!-- Header Image -->
    <div class="header-img">
        <img class="imgix-fluid" data-src="//assets.imgix.net/examples/octopus.jpg?fit=crop&crop=faces" >
    </div>
    <div class="feature-img">
        <a href="http://google.com"><img class="imgix-fluid" data-src="//assets.imgix.net/examples/jellyfish.jpg?fit=crop&crop=faces"></a>
    </div>
    <div class="feature-img">
        <img class="imgix-fluid" data-src="//assets.imgix.net/examples/lionfish.jpg?fit=crop&crop=faces">
    </div>
    <div class="feature-img">
        <img class="imgix-fluid" data-src="//assets.imgix.net/examples/clownfish.jpg?fit=crop&crop=faces">
    </div>
    <div class="feature-img">
        <img class="imgix-fluid" data-src="//assets.imgix.net/examples/fin.jpg?fit=crop&crop=faces">
    </div>
</div>

<script type="text/javascript">
var options = {
    updateOnResizeDown : true,
    updateOnPinchZoom : true,
    fitImgTagToContainerWidth: true,
    fitImgTagToContainerHeight: true,
    pixelStep : 10,
    onChangeParamOverride: function(w, h) {
        var dpr = Math.ceil(window.devicePixelRatio*10) /10;
            return {"txt": "w:" + w + " h:" +h + " dpr:" + dpr,
            "txtalign": "center,bottom",
            "txtsize": 20,
            "txtfont":"Helvetica%20Neue,bold",
            "txtclr":"ffffffff",
            "txtpad":20,
            "txtfit":'max',
            "exp":-2
        }
    }
};
imgix.onready(function() {
    imgix.fluid(options);
});
</script>

最佳答案

简短答案

在CSS中添加以下内容：

.feature-img > a {
    display: block;
    width: 100%;
    height: 100%;
}

这为您的<a>标记提供了确定的大小，因此其子图像的大小也将相应调整。

- 要么 -

从中更改HTML：

<div class="feature-img">
    <a href="http://google.com"><img class="imgix-fluid" data-src="..." ></a>
</div>

对此：

<a href="http://google.com" class="feature-img">
    <img class="imgix-fluid" data-src="...">
</a>

这会将已经很好定义的.feature-img样式应用于您的<a>标记，而不是将其应用于不必要的父<div>并将<a>标记用作子代。

长答案

将图像标记为imgix-fluid意味着它将始终调整其大小以适合其容器的宽度（在这种情况下为高度，因为您要传入fitImgTagToContainerHeight: true）。

在您的标准情况下（<img>标记包装在<div>中），其行为完全符合预期。借助CSS，您的<div>标签可以自行调整大小，并且imgix.js可以确保其中的图像尺寸正确，因为您已将其标记为imgix-fluid。

但是，当您像在示例中使用第二张图像一样将图像包装在<a>标记中时，<img>的父容器不再是大小合理的<div>，而现在是不会应用任何样式。而且，由于<a>默认情况下是一个内联元素，因此它本身没有固有的大小－内联元素可以自行调整大小以适合其内容。 <a>对其自身进行调整以适合其内部的<a>（没有<img>属性，因此将其调整为较小的尺寸，但因浏览器而异），并且imgix.js将其内部的图像调整为与其父src一样小。这有点像鸡和鸡蛋的问题，但它以失望而不是无限期地结束而告终。

如上所述，可以使用两种解决方案：


只需将某些样式应用于您的<a>标记。如果将其设置为<a>并将display:block;和width设置为height，则锚点将自动填充其父级100%创建的空间，因此imgix.js将适当调整子级<div>的大小。
在这种情况下，将父级<img>扔掉，然后将<div>放入容器中即可！只要为<a>提供<div>类，用<a>替换外部的<a>即可完美地工作。


用我的钱，第二种方法看起来更干净，更有意义。

希望这可以帮助！