html - 将带有 html 链接的 imgix 用于视网膜图像

Question

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

这是 fiddle 和代码: 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>

Answer 1

简短的回答

在您的 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>标记为 child 。

长答案

将图像标记为 imgix-fluid意味着它将始终调整自身大小以适合其容器的宽度(在本例中为高度，因为您传入的是 fitImgTagToContainerHeight: true )。

在您的标准情况下( <img> 标签包裹在 <div> 中)，这完全符合预期。你的<div>由于您的 CSS，标签本身的大小适当，并且 imgix.js 确保其中的图像大小合适，因为您已将它们标记为 imgix-fluid .

但是，当您将图像包装在 <a> 中时标记，就像您对示例中的第二张图像所做的那样，<img>的父容器不再是大小适中的 <div> , 它现在是 <a>没有任何样式应用到它。而且，因为 <a>默认情况下是一个内联元素，它没有自己固有的大小——内联元素会自行调整大小以适应它们的内容。 <a>调整自身以适合 <img>在它的内部(它没有 src 属性，因此将被调整到很小但在浏览器之间不一致)，并且 imgix.js 将其中的图像调整为与其父级一样小 <a> .这是一个先有鸡还是先有蛋的问题，但它以失望告终，而不是无限期地继续下去。

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

1. 简单地将一些样式应用到您的 <a>标签。如果将其设置为 display:block;并设置 width和 height至 100% ， anchor 将自动填充其父级创建的空间 <div>因此 imgix.js 将调整 child 的大小 <img>适本地。

2. 放弃父级 <div>在这种情况下，只需制作 <a>容器!更换外部 <div>用 <a>只要你给 <a> 就可以完美地工作feature-img类。

就我而言，第二种方法似乎更简洁、更有意义。

希望这对您有所帮助!