Вертикальное изображение Изменить размер. (Флекс или вх)


Привет! Спасибо за чтение! У меня есть экран входа в веб-приложение. Я сосредоточен на создании адаптивной страницы входа в систему, похожей на приложение. (без прокрутки и т.д.)

Описание проблемы:

  • При ширине области просмотра 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;
    }
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
73
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2


Обновлено:

Не забудьте удалить старые встроенные стили, которые вы объявили в .images div, чтобы они не возвращались к прежнему стилю:

<div class = "images">...</div> <!-- Remove old inline styles --> 

ОТВЕЧАТЬ:

Чтобы добиться этого, вот изменения, которые вам нужно внести в свой код:

(Обратите внимание, что я использую многоточие ... для обозначения сегментов исходного кода, которые я не изменил, а также для краткости.)

  1. Удалить гибкие свойства из селектора тела, так как они здесь не нужны. Раздел .container содержит все, что находится на странице. Я также немного подчистил набор правил body, переместив свойства padding и margin в набор правил универсального селектора, а также используя более краткое объявление overflow.

    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    
  2. Вместо этого оставьте гибкие свойства в селекторе контейнера и измените его высоту на 100vh., чтобы занять всю область просмотра экрана.

    .container {
            background-color: rgb(162, 162, 162);
            display: flex;
            flex-direction: column;
            min-height: fit-content;
            height: 100vh;
        }
    
  3. Дайте 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 */
    }
    
  4. Установите максимальную ширину и высоту для центральных изображений и их родительских элементов div (всего 100%). Свойства гибкости и позиционирования здесь также не нужны, так как на них влияет их родительский элемент div (.images).

    .mainImage {
        ...
        max-width: 60%;
        max-height: 60%;
        margin: 0 auto;
    }
    
    .secondaryImage {
        ...
        max-width: 60%;
        max-height: 40%;
        margin: 0 auto;
    }
    
  5. Установите тип подгонки объекта на contain для изображений. Я также изменил элементы с охватывает на разделы, чтобы лучше структурировать HTML. Стили здесь ранее соответствовали набору правил span img. Скопируйте его стили в этот новый набор правил и удалите его.

    .mainImage img,
    .secondaryImage img {
        ...
        object-fit: contain;
    }  
    
  6. Установите высоту div .allButtons на 30vh, чтобы занять оставшуюся высоту области просмотра.

    .allButtons {
        ... 
        height: 30vh;
        ...
    }
    
  7. Уменьшите отступы для кнопок на экранах меньшего размера. для решения проблемы с высотой. Я добавил медиа-запрос, чтобы настроить исходный размер кнопки на больших экранах. Не стесняйтесь настраивать высоту точки останова на любое желаемое значение.

    button {
        ...
        padding: 10px;
        ...
    }
    
    @media screen and (min-height: 620px) {
        button {
            padding: 20px;
        }
    }
    

HTML

   <div class = "mainImage">
     ...
   </div>
   <div class = "secondaryImage">
     ...
   </div>

Эй, спасибо, что потратили столько времени на разбор изменений и исправлений! Вы действительно очень помогли! В вашем коде (по крайней мере, для меня) изображения выходили за пределы страницы, но мне понравилось такое поведение, поэтому я его построил! И, конечно же, я смог быстро внести несколько необходимых исправлений. В основном изображения не масштабировались по размеру из-за свойства object-fit: continue. Теперь у меня есть полностью масштабируемые изображения, в основном благодаря вам, единственная проблема заключается в том, что на длинных портретных экранах изображения растягиваются, потому что мне нужно было заменить объект, соответствующий минимальной и максимальной высоте. Удаление минимальных высот обеспечивает

Michael Martell 13.05.2022 19:33

что изображения останутся пропорциональными, но когда я изменяю размер экрана, изображения остаются в наименьшем размере. Я думаю, я мог бы включить прослушиватель событий JS при изменении размера окна, чтобы «обновить изображение, чтобы обновить высоту/ширину изображения и сохранить соотношение сторон (да, я пробовал свойство соотношения сторон на изображениях, но это просто привело к переполнению изображения за пределами области просмотра на длинных портретных экранах.) Кажется, все работает хорошо в сафари / хроме и сотовой связи: я думаю, что это довольно близко. Просто нужно остановить вертикальное растяжение.

Michael Martell 13.05.2022 19:46

Я также хотел дать вам возможность утвердить ответ. Я обновил исходный пост, указав, где я нахожусь. (только для 2-го набора CSS).

Michael Martell 13.05.2022 19:56

Кроме того, я понимаю, что в приведенном выше комментарии я сказал «продолжать». При тестировании я, конечно, использовал, как вы указали.

Michael Martell 13.05.2022 19:58

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

Michael Martell 13.05.2022 20:03

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

Chizaram 13.05.2022 20:06

А пока взгляните на мое решение, собранное здесь: codepen.io/chizaram-igolo/pen/JjpbKvB, и посмотрите, не пропущено ли что-нибудь в ответе.

Chizaram 13.05.2022 20:20

Хорошо, попробуйте это; измените свойства max-width и max-height изображений только на ширину и высоту. Установите для их свойства object-fit значение «cover», чтобы предотвратить растяжение (но с компромиссом в виде потери части области изображений). Затем установите ширину div .images (родительский элемент родительских div изображений) равным 70vw или что-то выше. Настройте размеры родительских элементов div изображений, чтобы увидеть, какие значения дают наилучшие результаты.

Chizaram 13.05.2022 21:43

В настоящее время я занимаюсь какой-то другой деятельностью, поэтому сейчас я не могу ничего подтвердить, но следуйте инструкциям по этой ссылке и посмотрите, помогут ли они вам достичь желаемого результата. pqina.nl/блог/…

Chizaram 13.05.2022 21:44

Понятно. Я дал ответ. Может быть более чистый способ сделать это (тот, который не зависит от vh или vw.), но я доволен этим на данный момент. Отправьте мне личное сообщение с вашей информацией, и мы можем остаться в чате, и я отправлю вам подарочную карту, о которой я упоминал! Я закончил определение высоты с помощью гибкого увеличения/уменьшения, поскольку они заставляли изображения не выходить за пределы соответствующих полей: Images/allButtons, тогда как определение высоты на основе% или vh вызывало перекрытие изображения и изображения/кнопки. Любой, дайте мне знать, что вы думаете!

Michael Martell 13.05.2022 23:17

Я видел твой ответ, он действительно хорош. Я видел, что вы сделали с ростом и уменьшением гибкости. Отличная работа! Спасибо за вашу доброту, но вам не нужно, решение вашего вопроса достаточно полезно. :)

Chizaram 14.05.2022 05:15
Ответ принят как подходящий

Я думаю, что у меня это есть!! И портрет, и пейзаж. Конечно, из-за использования 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. Отличная работа! Спасибо за вашу доброту, но помощь в поиске решения вашего вопроса является для меня достаточной наградой. :)

Chizaram 14.05.2022 05:21

Другие вопросы по теме