CSS объект подгоняет обложку растягивая изображение

Положение объекта CSS fill, contain работают но cover работает как fill, Он должен заполнять div без растяжения, независимо от того, какая часть изображения будет cover, Я установил для div flex и применить object fit position к изображениям, которые находятся внутри в div. Зачем cover не работает? Если я установлю высоту в px для изображения это работает, но размер изображения должен быть изменен в соответствии с div, поэтому я установил высоту auto

<html>
<head>
<style>
.left{
  float:left;
}
.col100{
  width:100%; 
 }
.col33{
  width:33%;
}
.h30{
  height:30vw; 
 }
 .mright10{
  margin-right:10px;
 }
.bgred{
  background:red;
 }
 .bold{
  font-weight:bold;
 }
 .cover{
  object-fit: cover;
 }
.contain{
  object-fit: contain;
 }
.fill{
  object-fit: fill;
 }
 .flex{
  display:flex;
 }
</style>
</head>
<body>
<div class="left col33 mright10">
<p class="left col100">Original Size</p>
<section class="col100 left h30 bgred">
  <img class="col100" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100">contain</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover contain" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33 mright10">
<p class="left col100">fill</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover fill" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100 bold">Cover - but image is being stretched !</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover cover" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

</body>
</html>

Источник

1 ответ

Для этого лучше всего использовать div background-image, поэтому размеры изображения сохраняются. Пожалуйста, найдите мой background-image класс во фрагменте ниже! Надеюсь, это поможет.

.left{
  float:left;
}
.col100{
  width:100%; 
 }
.col33{
  width:33%;
}
.h30{
  height: 30vw;
 }
 .mright10{
  margin-right:10px;
 }
.bgred{
  background:red;
 }
 .bold{
  font-weight:bold;
 }
 .cover{
  object-fit: cover;
 }
.contain{
  object-fit: contain;
 }
.fill{
  object-fit: fill;
 }
 .flex{
  display:flex;
 }
 .background-image {
  background-image: url('https://www.gstatic.com/webp/gallery/1.sm.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
<div class="left col33 mright10">
<p class="left col100">Original Size</p>
<section class="col100 left h30 bgred">
  <img class="col100" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100">contain</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover contain" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33 mright10">
<p class="left col100">fill</p>
<section class="col100 left h30 bgred flex">
  <img class="col100 cover fill" src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</section>
</div>

<div class="left col33">
<p class="left col100 bold">Cover - no longer stretched !</p>
<section class="col100 left h30 bgred flex background-image">
  
</section>
</div>

Источник
Другие вопросы по тегам