Заставить изображение занимать всю высоту элемента, который меняет размер? - PullRequest
Новая
       18

Заставить изображение занимать всю высоту элемента, который меняет размер?

0 голосов
/ 12 ноября 2019

Я постараюсь сделать этот звук как можно более легким.

Я пытаюсь разместить 2 контейнера div рядом друг с другом, чтобы они всегда были одинаковой высоты.

Правильный div будет обычным текстом. Количество текста здесь будет различным, поскольку я планирую использовать его для разных страниц.

Левый блок будет состоять из 2 меньших контейнеров - блока заголовка и блока изображения под ним.

Вот наглядный пример того, чего я пытаюсь достичь. Предполагается, что зеленым квадратом будет полная фотография

Пример фотографии

Я хотел бы, чтобы фотография в блоке изображения слева занялаполная высота / ширина поля - (аналогично background-position: cover, который используется в CSS). Я бы предпочел использовать обычный тег img вместо установки его в качестве фона div.

Проблема, с которой я сталкиваюсь, заключается в том, что высота изображения слева имеет приоритет над текстовым полем нас правой стороны, и заставляет оба контейнера появляться намного дольше, чем я хочу. Я хочу, чтобы текстовый блок справа был приоритетным, и блок изображения изменяет высоту в зависимости от этого.

Я пытался использовать объект-подбор: содержать, но, к сожалению, он не работает. Самое близкое, что я получил, - это использование ширины: 100%, но тогда высота становится слишком большой.

Вот что у меня есть: 

.main {
    display: flex;
    }

.main .left {
    width: 40%;
    float: left;
    }

.main .left .title {
    background-color: black;
    text-align: center;
    display: block; 
    height: 90px;
    padding: 50px;
    color: white;
    font-size: 40px;
}
.photo {
    height: auto;
    width: 100%;
    }

.photo img {
    width: 100%;
    }

.main .right {
    width: 60%;
    float: right;
    }
<div class="main">

    <div class="left">
        <div class="title">This is my Title</div>
        <div class="photo"><img src="https://image.shutterstock.com/z/stock-photo-pastoral-green-field-with-long-shadows-in-tuscany-italy-275372477.jpg"></div>
    </div>

    <div class="right">
        <p>text goes here lalalalalala</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</div>

1 Ответ

0 голосов
/ 12 ноября 2019 
<style> 
.main {
    display: flex;
    }

.main .left {
    width: 40%;
    display: flex;
    flex-direction: column;
    }

.main .left .title {
    background-color: black;
    text-align: center;
    display: block; 
    height: 90px;
    padding: 50px;
    color: white;
    font-size: 40px;
}
.photo {
    width: 100%;
    overflow: hidden;
    position: relative;
    flex-grow: 1;
    }

.photo img {
    width: 100%;
    position: absolute;
    }

.main .right {
    width: 60%;
    }
</style>

Примечания:

  • Я сделал изображение абсолютно позиционированным, чтобы его собственная высота не растягивала наш гибкий ряд.
  • Изображение обрезается по высоте. Если заголовок выше текста (или той же высоты), вы вообще не увидите изображение.
  • Я сделал так, чтобы в левом столбце также отображалось сгибание, а поле для фотографии сгибалось, чтобы заголовок мог расти. оставайтесь на той же высоте, и окно для фотографий будет растягиваться до конца, чтобы соответствовать правому столбцу.
  • Нам не нужно плавать влево / вправо для изгибаемых элементов.
...