Используя imgix с html-ссылками для изображений сетчатки

Question

Я использую imgix для сервера моих изображений. У них есть отличная библиотека для обслуживания JPEG в нужном размере и плотности пикселей. Но это не работает, когда мне нужно добавить ссылки на эти изображения.

Вот скрипка и код: http://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> пометить как ребенка.

Длинный ответ

Маркировка изображения как 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%, якорь автоматически заполнит пространство, созданное его родителем <div> и, следовательно, imgix.js определит размер ребенка <img> соответственно.

2. Угробить родителя <div> в этом случае и просто сделать <a> контейнер! Замена внешнего <div> с <a> работает отлично, пока вы даете <a> feature-img учебный класс.

За мои деньги второй подход кажется чище и имеет больше смысла.

Надеюсь это поможет!