Фиксация изображения в div

Question

Я столкнулся с проблемой с подгонкой рисунка в div. В основном divs - это заголовки карт. Картинки имеют разную ориентацию и размер. Что мне делать, чтобы вписаться в них?

Photo in div

Answer 1

Хорошо, я исправил проблему. Я назначил класс div.

<div class="fill"> 
 
    <img src="..."> 
 
</div>

и в CSS.

.fill { 
 
    max-width: 70%; 
 
    height: 100%; 
 
} 
 

 
.fill img { 
 
    width: inherit; 
 
    height: inherit; 
 
}

Answer 2

Я использую этот трюк и работает очень хорошо для меня:

<div class="card" style="background-image: url(...)"></div> 

И в КСС:

.card { 
    background-size: cover; 
    height: 400px; 
    width: 600px; 
} 

Дело в том, чтобы масштабировать изображение с помощью cover фона который отображает большую часть изображения, а также охватывает весь div, поэтому ваши элементы будут соответствовать размеру.

Answer 3

Вы можете попробовать оба варианта:

.card-image { 
    background: url(...); 
    background-size: cover; 
} 

Две ноты: - около 7% браузеров не поддерживают крышку; - использование «фиксированного» фона может привести к непредсказуемым проблемам; - вы также можете попробовать background-size: содержать и посмотреть, дает ли он лучшие результаты.

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

.card-container { 
    position: relative; 
} 

.card-image { 
    padding-bottom: 56.25%; //for 16:9 ratio 
} 

.card-image img { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Answer 4

Вот подход с object-fit.

Заполнить: Это растянет изображение, чтобы оно соответствовало родительскому, не учитывая пропорции.

Содержит: Сохраняет пропорции, но может увеличивать или уменьшать размер изображения. Масштабирование с низким разрешением может быть искажено.

Обложка: Сохраняет пропорции изображения и будет соответствовать родительскому контейнеру, но, скорее всего, обрезает изображение.

.img-container { 
 
    height: 300px; 
 
    width: 400px; 
 
    background-color: yellow; 
 
} 
 

 
.cover { 
 
    object-fit: cover; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.contain { 
 
    object-fit: contain; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.fill { 
 
    object-fit: fill; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<h1>Cover</h1> 
 

 
<div class="img-container"> 
 
    <img src="http://i.stack.imgur.com/BPfiX.jpg" class="cover" /> 
 
</div> 
 

 
<h1>Contain</h1> 
 
<div class="img-container"> 
 
    <img src="http://i.stack.imgur.com/BPfiX.jpg" class="contain" /> 
 
</div> 
 

 
<h1>Fill</h1> 
 
<div class="img-container"> 
 
    <img src="http://i.stack.imgur.com/BPfiX.jpg" class="fill" /> 
 
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 5

Я предполагаю, что вы хотите, я также видел пост, где вы ответили на свой вопрос. Вот еще одно возможное решение. Вы можете играть с ним и установить контейнер width и height с различными значениями.Я использовал две фотографии. Один с height>width, а другой с height<width. здесь также fiddle

.img-container { 
 
    border: 2px dashed #f00; 
 
    line-height: 0; 
 
    text-align: center; 
 
} 
 
.img-container img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="img-container"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Doctor_Who_-_Current_Titlecard.png" alt="drwho"> 
 
</div> 
 
<div class="img-container"> 
 
    <img src="https://lh4.googleusercontent.com/-MkDsiF5-BXQ/AAAAAAAAAAI/AAAAAAAAKv0/dRBJk-2PGw4/s0-c-k-no-ns/photo.jpg" alt="who2" />