изображение плохо масштабируется

#html #css #image

#HTML #css #изображение

Вопрос:

У меня есть div файл, содержащий динамически генерируемые изображения, теперь каждое изображение имеет разные пропорции, теперь мое изображение не масштабируется в соответствии с пропорцией изображения.

Ожидаемый результат:

Вот мое решение до сих пор

 .container {
  display: flex;
  justify-content: space-between;
}

.conatiner_box {
  position: relative;
  width: 300px;
  height: 150px;
  border: 1px solid;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  border-left: 5px solid rgb(232, 159, 42);
  margin: 0px auto;
  overflow: hidden;
}

.image-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  transition: all 0.1s linear 0s;
}

 <div class="container">
   <div class="conatiner_box">
      <img src="https://i.ibb.co/HP3tksz/image1.jpg" class="image-box">
   </div>
   <div class="conatiner_box">
      <img src="https://i.ibb.co/Jz9cW7W/image2.jpg" class="image-box">
   </div>
</div>

Вот живая демонстрация jsfiddle

Что мне нужно сделать, чтобы решить эту проблему?

1.Для абсолютных изображений «CSS-трюк» вы также должны использовать object-fit contain для изображения (в противном случае изображение растягивается на 100% по сравнению с относительной оболочкой). developer.mozilla.org/en-US/docs/Web/CSS/object-fit .

Ответ №1:

Если вы хотите, чтобы ваши изображения были отзывчивыми, вы должны установить:

 max-width:100%;
max-height: 100%;

Вместо width и height .

Также удалите абсолютную позицию, которая не была нужна

ДЕМОНСТРАЦИЯ:

 .container {
  display: flex;
  justify-content: space-between;
}

.conatiner_box {
  position: relative;
  width: 300px;
  height: 150px;
  border: 1px solid;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  border-left: 5px solid rgb(232, 159, 42);
  margin: 0px auto;
  overflow: hidden;
}

.image-box {
  max-width: 100%;
  max-height: 100%;
  /*position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;*/
  transition: all 0.1s linear 0s;
}

 <div class="container">
   <div class="conatiner_box">
      <img src="https://i.ibb.co/HP3tksz/image1.jpg" class="image-box">
   </div>
   <div class="conatiner_box">
      <img src="https://i.ibb.co/Jz9cW7W/image2.jpg" class="image-box">
   </div>
</div>

Ответ №2:

Вы должны удалить position: absolute из .image-box и удалить display: flex; из .conatiner_box. Также изображение должно иметь ширину: 100%; и высоту: авто; Если вы хотите, чтобы все поля имели одинаковые размеры, вы должны затем определить ширину и высоту и использовать object: fit; Например, вы можете обрабатывать то же, что и фоновое изображение в CSS (но это не будет работать в Internet Explorer, проверьтеможно использовать).

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