Блог

Главная - Вопросы по программированию - Возможно ли идеально разместить большое изображение внутри меньшего div?

Возможно ли идеально разместить большое изображение внутри меньшего div?

#html #css #image

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

Вопрос:

Мне интересно, возможно ли это сделать? Я схожу с ума :/

Допустим, у меня есть изображение размером 1200×628, и я хочу, чтобы оно отображалось внутри div с фиксированной высотой 880×200.

Каждое решение, которое я пробовал, изображение всегда каким-то образом обрезается, чтобы соответствовать div, поэтому я спрашиваю, возможно ли автоматически изменять размер изображения, чтобы все это (и я имею в виду all: P) отображалось внутри div с его соотношением сторон? Как и в уменьшенном виде, я действительно не знаю, как это объяснить, надеюсь, вы поняли суть.

Заранее всем спасибо.

Комментарии:

1. Пожалуйста, опубликуйте свои решения ( каждое решение, которое я пробовал )

2. Высота фиксирована, а ширина также фиксирована. если да, то всегда будет небольшая обрезка. если нет, вы можете использовать метод подгонки объекта. есть достаточно примеров (и ответов, как вы можете это использовать)

Ответ №1:

вы можете использовать object-fit свойство css, как в примере ниже: 

 .img-wrap {
  position: relative;
  width: 880px;
  height: 200px;
  overflow: hidden;
}

.img-wrap img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}  
 <div class="img-wrap">
  <img src="https://cdn.pixabay.com/photo/2020/06/29/17/26/photographer-5353515_1280.jpg" />
</div>

Ответ №2:

Это должно сработать для вас.

<img src="xxx.jpg" width='880' />

880 это ширина вашего div или ширина изображения, которую вы хотите показать

Убедитесь, что вы не указываете какой-либо атрибут высоты.

Пример

 Actual width of image is 1200px, what you see below is of width 100
<br />

<img src="https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg" width='100' />

Ответ №3:

если вы хотите сохранить соотношение сторон:

 img {
  width: 100%;
  object-fit: contain;
}

но проблема с этим решением заключается в том, что изображение не будет занимать всю область его родительского элемента!

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

 img {
  width: 100%;
  height: 100%;
  display: flex;
}

Ответ №4:

ДА. Вы присваиваете внешнему div его размеры, а затем устанавливаете для изображений css с width:100%; и height:100%;

Другим вариантом было бы установить изображение в качестве фонового изображения и использовать background-size: cover;