0

我正在使用 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>
4

1 回答 1

2

简短的回答

在 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>标签包含在 a 中<div>），这完全符合预期。由于您的 CSS，您的<div>标签可以自行调整大小，并且 imgix.js 确保其中的图像大小合适，因为您已将它们标记为imgix-fluid.

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

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

  1. 只需将一些样式应用于您的<a>标签。如果将其设置为display:block;和 设置width和height，100%则锚点将自动填充其父级创建的空间<div>，因此 imgix.js 将<img>适当调整子级的大小。

  2. <div>在这种情况下抛弃父级并制作<a>容器！只要您提供课程，就可以完美地替换外部<div>。<a><a>feature-img

对我来说，第二种方法似乎更干净，更有意义。

希望这可以帮助！

于 2015-07-23T19:36:28.273 回答