Привет! Спасибо за чтение! У меня есть экран входа в веб-приложение. Я сосредоточен на создании адаптивной страницы входа в систему, похожей на приложение. (без прокрутки и т.д.)
Описание проблемы:
При ширине области просмотра 300 пикселей при высоте области просмотра 463 пикселя и меньше все элементы заполняют весь экран, а содержимое внизу страницы начинает обрезаться.
То же самое можно сказать и о высоте 528px и 650px.
(так что это говорит мне о масштабировании до определенного соотношения сторон (портрет телефона к относительно квадратным соотношениям сторон. При альбомном соотношении сторон изображения становятся смехотворно большими - ... ожидаемо, но нежелательно))
Цель: Вместо этого я просто хотел бы, чтобы изображения уменьшались по высоте и сохраняли соотношение сторон при изменении высоты области просмотра. (для поддержки соотношения сторон, обеспечиваемого flex-grow/shrink), в отличие от переполнения и изменения этого соотношения.
примечание: Для тех, кому нужен более простой пример: я думаю, что пример относительно прост. Может быть проще? Да, скорее всего. Хотя я не совсем уверен, что бы я сделал проще.
Кодепен:https://codepen.io/gold240sx/pen/eYVdGag (Я мог бы предложить включить инструменты разработки, чтобы получить тонкую ширину, поскольку дизайн прямо сейчас действительно предназначен для портретных телефонов.)
Гораздо проще просто скопировать и вставить в любой удобный для вас редактор.
ОРИГИНАЛ:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
height:100%;
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
overflow-x: hidden;
overflow-y: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100%;
}
.images{
background-color: aqua;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 100%;
flex-grow: 3;
flex-shrink: 3;
}
span img {
max-width: 100%;
max-height: 100%;
}
.mainImage {
background-color: rgb(128, 248, 0);
display: flex;
max-width: 70%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
max-width: 90%;
position: relative;
width: auto;
margin-left: auto;
margin-right: auto;
}
.allButtons {
background-color: rgb(255, 132, 0);
display: flex;
flex-direction: column;
border: 2px red solid;
flex-grow: 2;
flex-shrink: 2;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
background-color: rgb(249, 149, 0);
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 20px;
display: block;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
</style>
</head>
<body>
<div class = "container">
<div class = "images" style = "background-color: aqua; width: 100%; flex-grow: 3; flex-basis: 1;">
<span class = "mainImage">
<img src = "https://i.ibb.co/5YMMtJT/circle-logo-color.png" alt = "circle-logo-color">
</span>
<span class = "secondaryImage">
<img src = "https://i.ibb.co/H4qPCc9/logo-color.png" alt = "logo-color">
</span>
</div>
<div class = "allButtons">
<div class = "mainButtons">
<button>SIGNUP!</button>
<button>LOGIN!</button>
</div>
<div class = "bottomButtonContainer">
<button class = "bottomButton" style = "white-space: nowrap;">LEARN MORE</button>
</div>
</div>
</div>
ОБНОВЛЕНО CSS (приблизительно на основе первоначального ответа, предоставленного Чизарам) - масштаб изображения достигнут - соотношение сторон изображения еще не гарантировано -:
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height:100%;
width: 100%;
overflow: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
.images{
background-color: aqua;
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mainImage img,
.secondaryImage img {
max-height: 100%;
max-width: 100%;
}
.mainImage {
background-color: rgb(128, 248, 0);
max-height: 60vw;
margin: 0 auto;
display: flex;
justify-content: center;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
min-height: 30%;
max-width: 90vw;
max-height: 40%;
margin: 0 auto;
display: flex;
justify-content: center;
}
.allButtons {
display: flex;
flex-direction: column;
border: 2px red solid;
height: 30vh;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
/* background-color: rgb(249, 149, 0); */
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 10px;
display: block;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
Обновлено:
Не забудьте удалить старые встроенные стили, которые вы объявили в .images
div, чтобы они не возвращались к прежнему стилю:
<div class = "images">...</div> <!-- Remove old inline styles -->
ОТВЕЧАТЬ:
Чтобы добиться этого, вот изменения, которые вам нужно внести в свой код:
(Обратите внимание, что я использую многоточие ...
для обозначения сегментов исходного кода, которые я не изменил, а также для краткости.)
Удалить гибкие свойства из селектора тела, так как они здесь не нужны. Раздел .container
содержит все, что находится на странице. Я также немного подчистил набор правил body, переместив свойства padding и margin в набор правил универсального селектора, а также используя более краткое объявление overflow
.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
}
Вместо этого оставьте гибкие свойства в селекторе контейнера и измените его высоту на 100vh
., чтобы занять всю область просмотра экрана.
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
Дайте div .картинки высоту 70vh
и установите вертикальное и горизонтальное выравнивание на center
. Я также удалил свойства flex-grow
и flex-shrink
, потому что они не нужны для достижения желаемого результата.
.images {
...
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center; /* Vertical alignment in column flex-direction */
align-items: center; /* Horizontal alignment in column flex-direction */
}
Установите максимальную ширину и высоту для центральных изображений и их родительских элементов div (всего 100%). Свойства гибкости и позиционирования здесь также не нужны, так как на них влияет их родительский элемент div (.images
).
.mainImage {
...
max-width: 60%;
max-height: 60%;
margin: 0 auto;
}
.secondaryImage {
...
max-width: 60%;
max-height: 40%;
margin: 0 auto;
}
Установите тип подгонки объекта на contain
для изображений. Я также изменил элементы с охватывает на разделы, чтобы лучше структурировать HTML. Стили здесь ранее соответствовали набору правил span img
. Скопируйте его стили в этот новый набор правил и удалите его.
.mainImage img,
.secondaryImage img {
...
object-fit: contain;
}
Установите высоту div .allButtons
на 30vh, чтобы занять оставшуюся высоту области просмотра.
.allButtons {
...
height: 30vh;
...
}
Уменьшите отступы для кнопок на экранах меньшего размера. для решения проблемы с высотой. Я добавил медиа-запрос, чтобы настроить исходный размер кнопки на больших экранах. Не стесняйтесь настраивать высоту точки останова на любое желаемое значение.
button {
...
padding: 10px;
...
}
@media screen and (min-height: 620px) {
button {
padding: 20px;
}
}
HTML
<div class = "mainImage">
...
</div>
<div class = "secondaryImage">
...
</div>
что изображения останутся пропорциональными, но когда я изменяю размер экрана, изображения остаются в наименьшем размере. Я думаю, я мог бы включить прослушиватель событий JS при изменении размера окна, чтобы «обновить изображение, чтобы обновить высоту/ширину изображения и сохранить соотношение сторон (да, я пробовал свойство соотношения сторон на изображениях, но это просто привело к переполнению изображения за пределами области просмотра на длинных портретных экранах.) Кажется, все работает хорошо в сафари / хроме и сотовой связи: я думаю, что это довольно близко. Просто нужно остановить вертикальное растяжение.
Я также хотел дать вам возможность утвердить ответ. Я обновил исходный пост, указав, где я нахожусь. (только для 2-го набора CSS).
Кроме того, я понимаю, что в приведенном выше комментарии я сказал «продолжать». При тестировании я, конечно, использовал, как вы указали.
Я также понял, что мое обновление выглядит хорошо в адаптивном портретном и альбомном режимах, но ломается в мобильном ландшафте, поэтому мне, возможно, придется настроить для этого несколько свойств...
Рад, что вы нашли это полезным. Прослушиватель событий JS не понадобится, так как вы просто хотите, чтобы изображение реагировало на разные размеры экрана. В лучшем случае медиа-запросов должно быть достаточно для отображения адаптивного изображения. Хорошо, я посмотрю на второй CSS.
А пока взгляните на мое решение, собранное здесь: codepen.io/chizaram-igolo/pen/JjpbKvB, и посмотрите, не пропущено ли что-нибудь в ответе.
Хорошо, попробуйте это; измените свойства max-width и max-height изображений только на ширину и высоту. Установите для их свойства object-fit значение «cover», чтобы предотвратить растяжение (но с компромиссом в виде потери части области изображений). Затем установите ширину div .images (родительский элемент родительских div изображений) равным 70vw или что-то выше. Настройте размеры родительских элементов div изображений, чтобы увидеть, какие значения дают наилучшие результаты.
В настоящее время я занимаюсь какой-то другой деятельностью, поэтому сейчас я не могу ничего подтвердить, но следуйте инструкциям по этой ссылке и посмотрите, помогут ли они вам достичь желаемого результата. pqina.nl/блог/…
Понятно. Я дал ответ. Может быть более чистый способ сделать это (тот, который не зависит от vh или vw.), но я доволен этим на данный момент. Отправьте мне личное сообщение с вашей информацией, и мы можем остаться в чате, и я отправлю вам подарочную карту, о которой я упоминал! Я закончил определение высоты с помощью гибкого увеличения/уменьшения, поскольку они заставляли изображения не выходить за пределы соответствующих полей: Images/allButtons, тогда как определение высоты на основе% или vh вызывало перекрытие изображения и изображения/кнопки. Любой, дайте мне знать, что вы думаете!
Я видел твой ответ, он действительно хорош. Я видел, что вы сделали с ростом и уменьшением гибкости. Отличная работа! Спасибо за вашу доброту, но вам не нужно, решение вашего вопроса достаточно полезно. :)
Я думаю, что у меня это есть!! И портрет, и пейзаж. Конечно, из-за использования vh / vw могут возникнуть проблемы с заголовком мобильного браузера. :/ Может быть, есть какой-нибудь хакерский способ исправить. но да, это выглядит хорошо до сих пор. Я должен был бы проверить на мобильном телефоне, чтобы увидеть дальше. Galaxy fold, кажется, немного обрезает нижнюю часть (всего несколько пикселей). Кроме того, я бы взял весь этот CSS и обернул его в сам медиаэкран, а затем перешел на прокручиваемую веб-страницу... или, может быть, нет. В любом случае вот код... Спасибо Чизарам за всю вашу помощь! Я куплю тебе подарочную карту в день получки, если хочешь!
ОТВЕЧАТЬ:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>webApp</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height:100%;
width: 100%;
overflow: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
.images{
background-color: aqua;
flex-grow: 1;
flex-shrink: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.mainImage img,
.secondaryImage img {
object-fit: contain;
display: flex;
justify-self: center;
}
.mainImage img {
max-height: 25vh;
}
.secondaryImage img {
max-height: 20vh;
width: 100%;
max-width: 90vw;
}
.mainImage {
background-color: rgb(128, 248, 0);
max-height: 60vw;
margin: 0 auto;
display: flex;
justify-content: center;
object-fit: contain;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
min-height: 30%;
width: 90vw;
max-height: 40%;
margin: 0 auto;
display: grid;
align-content: center;
object-fit: contain;
}
.allButtons {
display: flex;
flex-direction: column;
border: 2px red solid;
height: 30vh;
flex-grow: 2;
flex-shrink: 1;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
/* background-color: rgb(249, 149, 0); */
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 2em;
display: block;
min-width: fit-content;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
@media only screen
and (max-device-width: 1023px)
/* and (min-device-pixel-ratio : 2.0) */
and (orientation: landscape) {
button {
padding: 1em;
}
}
</style>
</head>
<body>
<div class = "container">
<div class = "images">
<span class = "mainImage">
<img src = "https://i.ibb.co/5YMMtJT/circle-logo-color.png" alt = "circle-logo-color">
</span>
<span class = "secondaryImage">
<img src = "https://i.ibb.co/H4qPCc9/logo-color.png" alt = "logo-color">
</span>
</div>
<div class = "allButtons">
<div class = "mainButtons">
<button>SIGNUP!</button>
<button>LOGIN!</button>
</div>
<div class = "bottomButtonContainer">
<button class = "bottomButton" style = "white-space: nowrap;">LEARN MORE</button>
</div>
</div>
</div>
</body>
</html>
Ух ты! Это замечательно! Здесь с моей стороны тоже все хорошо. Для заголовков мобильных браузеров вы можете установить .container div height: calc(100vh - {height of header bar})
и margin-top: {height of header bar}
в медиа-запросе CSS, который обнаруживает только мобильные устройства. Вот как можно обнаружить только мобильные экраны: stackoverflow.com/a/62793120/11838606. Отличная работа! Спасибо за вашу доброту, но помощь в поиске решения вашего вопроса является для меня достаточной наградой. :)
Эй, спасибо, что потратили столько времени на разбор изменений и исправлений! Вы действительно очень помогли! В вашем коде (по крайней мере, для меня) изображения выходили за пределы страницы, но мне понравилось такое поведение, поэтому я его построил! И, конечно же, я смог быстро внести несколько необходимых исправлений. В основном изображения не масштабировались по размеру из-за свойства object-fit: continue. Теперь у меня есть полностью масштабируемые изображения, в основном благодаря вам, единственная проблема заключается в том, что на длинных портретных экранах изображения растягиваются, потому что мне нужно было заменить объект, соответствующий минимальной и максимальной высоте. Удаление минимальных высот обеспечивает