Question

我使用imgix来处理我的图像。他们有一个很棒的库，可以在合适的尺寸和像素密度下提供jpeg。但是当我需要添加指向这些图像的链接时，它不起作用。

<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>并使用imgix-fluid标记为孩子。

长答案

将图像标记为fitImgTagToContainerHeight: true意味着它将始终根据其容器的宽度调整其大小（在这种情况下，高度，因为您正在传递<img>）。< / p>

在您的标准情况下（<div>中包含<div>标记），其行为完全符合预期。由于你的CSS，你的imgix-fluid标签大小适当，imgix.js确保其中的图片大小合适，因为你已将它们标记为<a>。

但是，当您在示例中使用第二张图片完成<img>标记中的图片时，<div>的父容器不再是大小合适<a>，它现在是<a>，没有任何造型适用于它。并且，因为默认情况下<a>是一个内联元素，所以它没有自己的固有大小 - 内联元素大小适合其内容。 <img>自身的大小适合src内部的<a>（没有<a>属性，因此可以根据浏览器与浏览器之间的小而不一致的大小调整，以及imgix.js将其中的图像调整为与其父display:block;一样小。这是一种鸡与蛋的问题，但它以失望而不是无限期地结束。

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

只需将一些样式应用于width标记即可。如果您将其设置为height并将100%和<div>设置为<img>，则锚点将自动填充其父<div>创建的空间，从而进行imgix。 js会适当调整孩子<a>的大小。
在这种情况下抛弃父<div>，只需将<a>放到容器中！只要您将<a> feature-img类授予。{/ p>

Handler

Looper

对于我的钱，第二种方法似乎更清洁，更有意义。

希望这有帮助！

使用imgix和html链接的视网膜图像

1 个答案:

简答

长答案