Сохранение пропорций изображения, но обрезка при достижении максимальной/максимальной высоты

Question

Я пытаюсь сделать это изображение чувствительным, чтобы оно изменяло размер и сохраняло его соотношение сторон на всех размерах. Однако выше 650 пикселей, его высота не будет увеличиваться, а просто обрезает верх и низ, чтобы сохранить соотношение и не растягиваться. Также я хочу, чтобы высота изображения не опускалась ниже 200 пикселей, а только слева и справа. Я хочу, чтобы изображение всегда было центром. Вот то, что я до сих пор: https://jsfiddle.net/4q83mh41/

<div class="hero"> 
<img src="http://wpdevserver.x10host.com/wp-content/themes/wp/img/hero1.jpg"> 
</div> 


.hero { 
    width: 100%; 
    min-height:200px; 
    max-height: 650px; 
    position: relative; 
} 
.hero img { 
    width: 100%; 
    height:auto; 
    min-height:200px; 
    overflow: hidden; 
    max-height: 650px; 
    position:aboslute; 
} 

Большое спасибо

Answer 1

путем добавления некоторых JavaScript, положение изображения можно регулировать динамически внутри .hero дел. Кроме того, CSS-запросы могут использоваться для правильной коррекции ширины изображения.

.hero { 
    width: 100%; 
    overflow: hidden; 
    max-height: 650px; 
} 

.hero img { 
    position: relative; 
    height: 200px; 
    width: auto; 
} 

@media (min-width:420px) { 
    .hero img { 
    width: 100%; 
    height: auto; 
    } 
} 

Javascript просто прослушивает изменения размера событий и регулирует top и right свойства относительно позиционированного изображения, чтобы держать его в центре. Обратите внимание, что я использую JQuery для управления свойствами.

var heroresize = function() { 
    var aspect = 1800./858, 
     maxheight = 650, 
     minheight = 200, 
     width = $(".hero").width(); 
    if(width < minheight*aspect) { 
    $(".hero img").css("right",(minheight*aspect - width)/2 + "px"); 
    } else { 
    $(".hero img").css("right","0px"); 
    } 

    if(width > maxheight*aspect) { 
    $(".hero img").css("top",(maxheight - width/aspect)/2 + "px"); 
    } else { 
    $(".hero img").css("top","0px"); 
    } 
} 
$(function(){ 
    heroresize(); 
    // remove if you don't need dynamic resizing 
    $(".hero").on("resize",heroresize); 
}); 

Javascript может вызвать некоторое отставание/заикание, потому что события изменения размера могут быть интенсивными. Если вам не нужно беспокоиться о динамических размерах, вы можете удалить указанную строку.

Я создал кодекс, который вы можете играть здесь: http://codepen.io/regdoug/pen/azxVwd Обратите внимание, что код имеет максимальную высоту 350 пикселей, потому что это позволяет вам видеть эффект без изменения размера.