как обрезать изображения, которые имеет любой размер с помощью CSS

Question

я использовал, чтобы обрезать изображения, используя эту технику
HTML

<div class="container"> 
    <img src="http://your-source.com" alt="alt" /> 
</div> 

CSS

.container { width: 418px; height: 240px; overflow: hidden; } 
.container img { width: 100%; } 

это работает, если у вас есть изображение, как этот

--------- 
|  | 
|  | 
|  | 
|  | 
--------- 

но если у вас есть изображение, как это

------------------- 
|     | 
------------------- 

вы получите пустую область внизу, потому что изображение имеет большую ширину и небольшую высоту.

у вас есть альтернативный способ обрезать изображения с помощью css, который работает для обеих ситуаций?

Answer 1

Если вы не должны предназначаться браузеры До IE9 вы можете создать такой эффект, используя transform: translate в сочетании с max-width и max-height свойствами - это будет держать ваш контейнер DIV заполнен и сохранить пропорции:

.container { 
 
    position:relative; 
 
    width: 418px; 
 
    height: 240px; 
 
    overflow: hidden; 
 
    background:red; 
 
    margin-bottom:10px; 
 
} 
 
.container img { 
 
    display:block; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform-origin: 50% 50%; 
 
    transform: translate(-50%, -50%); 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/300x50" alt="alt" /> 
 
</div> 
 
<div class="container"> 
 
    <img src="http://placehold.it/300x300" alt="alt" /> 
 
</div> 
 
<div class="container"> 
 
    <img src="http://placehold.it/300x350" alt="alt" /> 
 
</div>

Answer 2

Мне нравится ответ от @easwee (менее славной разметки!), но я думал, что я разделю другую технику для тех, кто еще может понадобиться для поддержки браузеров, которые не поддерживают CSS преображается. Еще одно преимущество заключается в том, что использование встроенного контейнера означает, что вам не нужно вручную устанавливать высоту на свой содержащий элемент, что делает эту технику отличной для гибких конструкций.

/*Mini Reset*/ 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
/*Container element needs width defined but not height*/ 
 
.container { 
 
    width: 50%; 
 
    float: left;  
 
    overflow: hidden; 
 
} 
 
.outer-intrinsic { 
 
    position: relative; 
 
    padding-bottom: 75%; 
 
    height: 0; 
 
} 
 
.inner-intrinsic { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.inner-intrinsic img { 
 
    max-width: 100%; 
 
    min-height: 100%; 
 
}

<div class="container"> 
 
    <div class="outer-intrinsic"> 
 
     <div class="inner-intrinsic"> 
 
      <img src="https://unsplash.imgix.net/photo-1416184008836-5486f3e2cf58?q=75&fm=jpg&s=1168eb53b941d6e992595864a3771f7a" alt="Portrait Image" /> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="outer-intrinsic"> 
 
     <div class="inner-intrinsic"> 
 
      <img src="https://ununsplash.imgix.net/uploads/141202616623001715bb7/c1b3b9b0?fit=crop&fm=jpg&h=675&q=75&w=1050" alt="Landscape Image" /> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="outer-intrinsic"> 
 
     <div class="inner-intrinsic"> 
 
      <img src="https://unsplash.imgix.net/photo-1419332563740-42322047ff09?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="Landscape Image" /> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="outer-intrinsic"> 
 
     <div class="inner-intrinsic"> 
 
      <img src="https://unsplash.imgix.net/photo-1417962798089-0c93ceaed88a?fit=crop&fm=jpg&h=1575&q=75&w=1050" alt="Portrait Image" /> 
 
     </div> 
 
    </div> 
 
</div>

Хитрость здесь в том, что padding-bottom свойство на .outer-intrinsic элемент устанавливает соотношение. При 75%, например, в демо, соотношение составляет 4: 3. Итак, если вы хотите идеальный квадрат, вы должны установить padding-bottom на 100%. Свойства max-width и min-height заставляют содержимое изображения полностью заполнять контейнер.