|
Руст Кулматов
|
||||||||
|
К сожалению, в ЦСС до сих пор нет нормального способа это сделать. Если хотя бы одна сторона элемента Чтобы побороть это, можно воспользоваться старым хаком, зафиксировав место под картинку с помощью |
||||||||
<!-- index.html -->
<div class="box">
<img src="demo.png" />
</div>
/* style.css */
.box {
position: relative;
padding-bottom: 75%;
/* Размеры изображения 400x300.
300 / 400 = 0.75 → 75% */
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Padding-bottom считается относительно ширины родителя, поэтому с помощью него можно задать пропорцию контейнера
|
Применим этот способ для вёрстки картинки с текстом: |
||||||||
<!-- index.html -->
<div class="row">
<div class="boxWrapper">
<div class="box">
<img src="demo.png" />
</div>
<div class="caption">
Остроумная подпись к изображению
</div>
</div>
<div class="text">
Пласт, так или иначе, неравномерен.
Показательный пример – детройтское техно
начинает соноропериод. Ощущение
мономерности ритмического движения
возникает, как правило, в условиях
темповой стабильности, тем не менее
процессуальное изменение ненаблюдаемо.
</div>
</div>
/* style.css */
.row {
display: flex;
}
.boxWrapper {
width: 30%;
margin-right: 1em;
}
.text {
flex: 1
}
.box {
border: 1px solid #000;
}Без обёртки
padding-bottom посчитатется от всей ширины родителя и пропорции сломаютсяПласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.
|
Теперь, если картинка по |
||||||||
Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.
Картинка загрузилась, всё в порядке
Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.
Картинка не загрузилась, всё на своих местах
|
Если изображение выполняет функцию фона, то лучше и вставить его фоном, растянув нужным образом с помощью свойства |
||||||||
<!-- index.html -->
<div class="container with__cover">
Пласт, так или иначе, неравномерен.
Показательный пример – детройтское техно
начинает соноропериод. Ощущение
мономерности ритмического движения
возникает, как правило, в условиях
темповой стабильности, тем не менее
процессуальное изменение ненаблюдаемо.
</div>
<div class="container with__contain">
Пласт, так или иначе, неравномерен.
Показательный пример – детройтское техно
начинает соноропериод. Ощущение
мономерности ритмического движения
возникает, как правило, в условиях
темповой стабильности, тем не менее
процессуальное изменение ненаблюдаемо.
</div>
/* style.css */
.container {
background: url(demo.png) no-repeat center;
height: 300px;
border: 1px solid #000;
}
.container.with__cover {
background-size: cover;
/* Изображение растянется под обрез
с сохранением пропорций */
}
.container.with__contain {
background-size: contain;
/* Изображение впишется в контейнер */
}
Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.
Изображение растянуто по обрез
Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.
Изображение вписано в прямоугольник с текстом
|
P. S. Это был совет о
|