Я думаю с вопросом адаптивных изображений все верстальщики часто встречались. Большинство статей, которые я прочитал, мне не подошли. В каждом случае были свои минусы. Приходилось писать дополнительные стили css или загружать разные изображения на определенных разрешениях. Почему-то универсального метода я не нашел. Это было похоже на то, как сделать блоки одинаковой высоты. Вроде бы можно сделать это несколькими способами, но лучший способ — это js.
Да, изображения. С панели администратора постоянно заливались изображения не той ширины или высоты. И в на страницах смотрелось очень криво. А если одно и тоже изображение будет на разных страницах и в разных блоках.
В общем я решил эту задачу с помощью доброго старого js.
.bock_img {
border: 1px solid #000;
height: 200px;
width:35%;
overflow: hidden;
text-align: center;
line-height: 197px;
margin: 5px;
display: inline-block;
position: relative;
}
.bock_img > img {
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
display: inline-block;
max-width: 100%;
max-height: 100%;
}
$(document).ready(function () {
/*=============================адаптивное изображение===========*/
$(".bock_img").each(function(){
var adapBlock = $(this);
var adapImg = adapBlock.find("img");
if(adapBlock.height() > adapImg.height()){
adapImg.css("max-width", "none")
}
else if(adapBlock.width() > adapImg.width()){
adapImg.css("max-height", "none")
}
})
});
Автор: рыцарь со стволом
