Как сделать изображение подходящим для его div CSS - PullRequest
Новая
       11

Как сделать изображение подходящим для его div CSS

0 голосов
/ 28 февраля 2019

Предположим, у меня есть следующий код: 

img {
  max-widht: 100%;
  max-height: 100%;
}
<div width="500" height="500">
  <img src="https://placehold.it/250x150">
</div>

Это прекрасно работает для всех изображений, если width или height выше 500 пикселей.Но с меньшими изображениями изображение не покроет div.Есть ли способ CSS заставить изображение быть наименьшим width: 100% или height: 100% независимо от его исходного размера?

РЕДАКТИРОВАТЬ: Это решение от disinfor сработало для меня. 

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

Ответы [ 4 ]

0 голосов
/ 01 марта 2019

Вы можете использовать background-size правило CSS, если поместите изображение в фоновый режим:

css 

    .block {
        background: url(my_picture.png) no-repeat 50% 50%;
        background-size: cover;
    }

html 

    <div width="500" height="500" class="block"></div>
0 голосов
/ 01 марта 2019 

img {
    max-width: 100%;
    object-fit: cover;
}
<div width="500" height="500">
    <img src="https://placehold.it/250/150">
</div>
0 голосов
/ 01 марта 2019

Я думаю, что вы ответили на свой вопрос!У тебя есть Div!=> ширина: 500 пикселей и высота: 500 пикселей!Когда изображение больше этого размера, Max-width и max-height могут работать правильно!но когда ваше изображение меньше, max-width не может вам помочь, потому что ширина изображения меньше 500px!например, у вас есть Image => width: 300px.max-width: 100% равно 300px!тогда вы можете изменить свой код следующим образом: 

<div>
   <img src="#" alt="Alternate Text" style="width:500px;height:500px;" />
</div>

, но если вы хотите адаптивное изображение: 

<div style="width:500px;height:500px;">
   <img src="#" alt="Alternate Text" style="width:500px;height:auto;" />
</div>
0 голосов
/ 01 марта 2019

Сделайте следующее: 

img {
    width: 100%;
    height: auto;
}

Причина, по которой изображения меньшего размера (в вашем случае шириной менее 500 пикселей) не занимают всего пространства, заключается в том, что max-width означает "максимальную ширину фактического изображения".«.Так что если вы используете width: 100% вместо этого, изображение заполнит пространство своего контейнера.

Использование height: auto гарантирует, что изображение не будет растягиваться / искажаться по вертикали.

Подтверждение концепции: 

.normal, .land, .port, .fit {
  height: 200px;
  width: 200px;
}

img {
  width: 100%;
  height: auto;
}

div.land img,
div.port img {
  width: 100%;
  height: 100%;
}

div.fit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="fit">
  <img src="https://placehold.it/500x750">
</div>

<div class="fit">
  <img src="https://placehold.it/50x100">
</div>

<div class="normal">
  <img src="https://placehold.it/75x10">
</div>

<div class="normal">
  <img src="https://placehold.it/10x75">
</div>

<div class="land">
  <img src="https://placehold.it/75x10">
</div>

<div class="port">
  <img src="https://placehold.it/10x75">
</div>
...