Подгонка изображения во флексбокс определенных размеров - PullRequest
Новая
       4

Подгонка изображения во флексбокс определенных размеров

0 голосов
/ 15 октября 2019

Итак, я недавно задал похожий вопрос о том, как img может вместить div, и ответом было установить height: 100% и width: 100% изображения, и это сработало хорошо. Но теперь я также использую flexbox внутри этого div, и изображение все еще переполняется внизу ... 

.d1 {
  background: green;
  width: 300px;
  height: 100px;
  padding: 5px;
}

.d2 {
  background: red;
  display: flex;
  padding: 5px;
}

.img1 {
  width: 100%;
  height: 100%;
}
<div class="d1">
  <div class="d2">
    <img class="img1" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  </div>
</div>

Ответы [ 4 ]

1 голос
/ 15 октября 2019

Обычно вам нужно добавить высоту к контейнеру img и подгонку объекта: свойство cover для img также удаляет высоту из img. PS: подгонка объекта сохранит соотношение сторон изображения. 

<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
    background: green;
    width: 300px;
    height: 100px;
    padding: 5px;
}
.d2 {
    background: red;
    display: flex;
    padding: 5px;
    height: calc(100% - 10px); // minus padding
}
.img1 {
    width: 100%;
    object-fit: cover; //not supported in IE
}
</style>
</head>
<body>

<div class="d1">
    <div class="d2">
        <img class="img1" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    </div>
</div>

</body>
</html>

кодовая ссылка https://codepen.io/madeelahsan/pen/xxxVpbm

1 голос
/ 15 октября 2019

Дайте height:100% родительскому div вашего изображения. Также настройте отступы или используйте calc для установки высоты height:calc(100% - 10px) См. Ниже. 

.d1 {
  background: green;
  width: 300px;
  height: 100px;
  padding: 5px;
}

.d2 {
  background: red;
  display: flex;
  padding: 5px;
  height: calc(100% - 10px);
}

.img1 {
  width: 100%;
  height: 100%;
}
<div class="d1">
  <div class="d2">
    <img class="img1" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  </div>
</div>

Надеюсь, это поможет:)

0 голосов
/ 15 октября 2019

Перемещение высоты и ширины от .d1 до .d2. 

.d2 {
    width: 300px;
    height: 100px;
}
0 голосов
/ 15 октября 2019 

.d1 {
    display: flex;
    flex-wrap: nowrap;
    background: green;
    width: 300px;
    height: 100px;
}

.d2 {
    background: red;
    display: flex;
    padding: 5px;
}

.img1 {
    width: 100%;
    height: 100%;
}
<div class="d1">
    <div class="d2">
        <img class="img1" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...