Этого было довольно легко добиться, но теперь у меня проблема в том, что заголовок изображений, выровненный по левому краю, конечно, не следует за изображением по центру, а вместо этого прилипает к краю страницы. Я пробовал экспериментировать со всевозможными вычисляемыми отступами и другим мусором, но пока не могу в этом разобраться.
В идеале мне хотелось бы масштабировать блок в соответствии с областью просмотра и выравнивать его по центру, а затем иметь изображение во всю ширину внутри блока и заголовок, выровненный по левому краю.
Вот что у меня получилось, извините за грубый CSS.
Код:
Код: Выделить всё
/* Create 1 column that floats */
.column {
float: center;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Add a card effect for articles */
.card {
background-color: var(--bg-color);
padding: 1vw;
margin-top: 1vw;
cursor: pointer;
width: 100%;
border-style: none;
}
.card h3 {
color: var(--text-color);
font-family: 'Lato', sans-serif;
font-size: 3vw;
text-align: left;
margin-left: 1.5vw;
margin-bottom: 0vw;
margin-top: 0vw;
}
.card img {
display: block;
width: auto;
height: auto;
max-width: 95vw;
max-height: 75vh;
margin-left: auto;
margin-right: auto;
padding: 1vw;
}Код: Выделить всё
[url=page.html]
Image Title
[img]https://via.placeholder.com/1920x1080.jpg[/img]
alt="Image Title">
[/url]
Подробнее здесь: https://stackoverflow.com/questions/662 ... age-corner
Мобильная версия