CSS для «масштабирования» изображения по высоте и ширине окна браузера
Я создаю статический сайт, на котором изображения размещаются в адаптивной «рамке изображения», поэтому коврик имеет одинаковый размер с каждой стороны, независимо от соотношения сторон изображения. Это работает хорошо; однако...
Я хочу убедиться, что вся «рамка изображения» видна в окне браузера. В настоящее время размер рамки соответствует ширине, что означает, что высокие изображения прокручиваются вниз.
Может ли кто-нибудь посмотреть мой код и предложить, как мне динамически изменять размер «рамки изображения», чтобы она была на 100% видна в окне браузера?
Здесь есть JSFiddle - ссылка
.frame {
position: relative;
width: 100%;
background: black;
box-shadow: 0 10px 7px -5px rgba(0, 0, 0, 0.3);
}
.mat {
position: absolute;
background: white;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) inset;
}
.art {
position: absolute;
}
.art img {
width: 100%;
}
.art:after {
content: '';
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) inset;
}<div class = "frame" style = "padding-bottom: 115.09%">
<div class = "mat" style = "top: 2.1721%; bottom: 2.1721%; left: 2.50%; right: 2.50%;">
<div class = "art" style = "top: 11.354%; bottom: 11.354%; left: 13.158%; right: 13.158%;">
<img src = "https://cw109eu.uk/images/portfolios/recent/231106-44511-1.jpg" />
</div>
</div>
</div>Спасибо
Ответы 2
Мы можем добавить width: 100% и height: 100vh к parent div и добавить width: 100%, height: 100% & object-fit: cover или object-fit: contain по мере необходимости.
Это иллюстрация. Проверьте ссылку, которую я предоставил, и она поможет вам лучше понять, а если я что-то пропустил или неправильно понял, поделитесь. Спасибо.
Сделайте изображение того же размера, что и его контейнер (возможно, лучше использовать сетку, чем абсолютное позиционирование). Вам также не нужно много вложений, только рамка и отступы на изображении.
Вот рабочий фрагмент, дающий желаемый результат.
html, body {
display: grid;
grid-template: 100%/ 100%
}
html { height: 100% }
img {
box-sizing: border-box;
border: solid 2vmin #000;
padding: 13vmin;
width: 100%; height: 100%;
object-fit: cover;
box-shadow:
0 10px 7px -5px rgba(0, 0, 0, .3),
0 0 20px 0 rgba(0, 0, 0 , .5) inset
}<img src='https://cw109eu.uk/images/portfolios/recent/231106-44511-1.jpg'>Обновлено: На всякий случай я неправильно понял, и что вы на самом деле хотите, так это:
html, body {
display: grid;
grid-template: 100%/ 100%
}
html { height: 100% }
img {
place-self: center;
box-sizing: border-box;
border: solid 2vmin #000;
padding: 8vmin;
max-width: 100%; max-height: 100%;
box-shadow:
0 10px 7px -5px rgba(0, 0, 0, .3),
0 0 20px 0 rgba(0, 0, 0 , .5) inset
}<img src='https://cw109eu.uk/images/portfolios/recent/231106-44511-1.jpg'>@philC В моем случае body — это контейнер изображения. Вам нужно добавить стили body, связанные с сеткой, в любой имеющийся у вас контейнер изображений.
Здесь меня подводит недостаток знаний. Я попытался добавить стили тела в контейнер для изображения, но его размер не удалось изменить. Можете ли вы посмотреть мою обновленную скрипку (jsfiddle.net/Phil89a/wg9ce8ft/14) и сказать мне, что я делаю неправильно?
@PhilC Во-первых, у вас есть еще один div между и вторым, высота контейнера должна основываться на чем-то другом, а не на изображении. В моих демонстрациях между телом и img нет другого элемента, а высота тела вычисляется на основе высоты его родительского элемента html, высота которого, в свою очередь, зависит от фона.
хорошо, понял, и теперь эта часть работает :-). Следующий вопрос: мне нужно добавить второй кадр (чтобы изображение выглядело так, будто оно находится за ковриком). Как мне использовать код jsfiddle.net/Phil89a/wg9ce8ft/37 включить CSS .art-frame после применения .frame? Где-то там :-)
Выглядит очень хорошо — намного чище, чем код, который я использовал. Но.... Добавление стилей HTML и основного текста ломает мой сайт. В любом случае, как заставить это работать, просто ориентируясь на конкретную страницу? Все еще изучаю :-)