Как поместить изображение (img) В div и сохранить соотношение сторон?

Question

Как поместить изображение (img) В div и сохранить соотношение сторон?

У меня есть div 48x48 и внутри него есть элемент img, я хочу поместить его в div без потери какой-либо части, в то же время соотношение сохраняется, это достижимо с помощью html и css?

1545 10

html css

10 ответов:

Comments

Ничего не найдено.

Thomas · Accepted Answer · 2010-12-09 06:08:25

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

HTML & JavaScript
<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>
CSS
#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}
Если вы используете библиотеку JavaScript, вы можете воспользоваться ее преимуществами.

Michael · Accepted Answer · 2010-12-09 08:23:44

Используйте max-height:100%; max-width:100%; для изображения внутри div.

Andrii Verbytskyi · Accepted Answer · 2015-06-19 16:06:21

К сожалению, max-width + max-height не полностью покрывают мою задачу... Поэтому я нашел другое решение:

Для сохранения соотношения изображений при масштабировании вы также можете использовать object-fit CSS3 propperty.

Полезная статья: Управление соотношениями сторон изображения с помощью CSS3
img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}
Плохие новости: IE не поддерживается (могу ли я использовать )

Max · Accepted Answer · 2012-11-27 14:48:27

Используя только CSS:

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

alex · Accepted Answer · 2010-12-09 04:53:29

HTML
<div>
    <img src="something.jpg" alt="" />
</div>
CSS
div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}
Это заставит изображение расшириться, чтобы заполнить его родительский элемент, размер которого задан в CSS div.

Bartho Bernsmann · Accepted Answer · 2016-10-16 02:04:52

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

Я понял, что мне нужно установить div-дисплей на flex, поэтому в основном это мой CSS:
div{
display: flex;
}

div img{ 
max-height: 100%;
max-width: 100%;
}

Webveloper · Accepted Answer · 2016-05-20 10:46:05

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

Ниже, если мы хотим, чтобы div был тем же соотношением сторон, что и фотография, то заполнитель.png-это небольшое прозрачное изображение с тем же соотношением сторон, что и фотография.формат jpg. Если фотография квадратная, то это заполнитель размером 1х1х2, если фотография-миниатюра видео, то это заполнитель размером 16х9 и т. д.

Конкретно к вопросу, используйте 1x1 заполнитель для поддержания квадратного отношения div, с фоновым изображением, использующим background-size для поддержания соотношения сторон фотографии.

Я использовал background-position: center center;, так что фотография будет центрирована в div. (Выравнивание фотографии по вертикали в центре или внизу будет выглядеть некрасиво с фотографией в теге img.)
div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>
Чтобы избежать дополнительного http-запроса, преобразуйте изображение-заполнитель в данные: URL.
<img src="data:image/png;base64,..."/>

Faisal · Accepted Answer · 2018-06-21 18:14:00

Попробуйте CSS:
img {
  object-fit: cover;
  height: 48px;
}

Saurabh Sheorain · Accepted Answer · 2017-04-26 11:01:46

Вы можете использовать класс "img-fluid" для более новой версии I.e Bootstrap v4.

И может использовать класс "img-responsive" для более старой версии, такой как Bootstrap v3.

Использование:-

Img тег с : -

Класс="img-жидкость"

Src="..."

VSchlattinger · Accepted Answer · 2018-01-30 23:41:22

Для меня работал следующий CSS (протестирован в Chrome, Firefox и Safari).

Есть несколько вещей, работающих вместе:

max-height: 100%;, max-width: 100%; и еще height: auto;, width: auto; Сделайте масштаб img В зависимости от того, какое измерение первым достигает 100%, сохраняя при этом соотношение сторон

position: relative; в контейнере и position: absolute; в ребенке вместе с top: 50%; и left: 50%; центрируйте верхний левый угол img в контейнере

transform: translate(-50%, -50%); перемещает img назад влево и вверх на половину его длины. размер, таким образом центрируя img в контейнере

CSS:
.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}