Flexbox / CSS / Адаптивные изображения веб-дизайна

Я пишу целевую страницу с помощью css / flexbox, и мне трудно добиться того, чтобы некоторые изображения были одинакового размера. Все изображения логотипов, которые у меня есть, имеют разные размеры, и я хочу, чтобы они были одинакового размера, чтобы ссылки были интерактивными. Мне удалось добиться этого, создав таблицу css, но я бы очень хотел использовать flexbox, если это возможно.

Вот код, о котором идет речь:

.how-to-buy {
      /*rgba used to add opacity*/
      background-color: rgba(255,255,255,0.4);
      border: hidden;
      border-radius: 25px;
      /* make sure there is space between buttons and bottom of page */
      margin-bottom: 30px;
      padding: 10px;
      max-width: 90%;
      text-align: center;
    }

    .ebook-links img {
      border-radius: 15px;
    }

    .ebook-links img:hover {
    }

    .how-to-buy{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .ebook-links{
      max-width: 80%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo1{ flex: 2.07;}
    .logo2{ flex: 2.4;}
    .logo3{ flex: 3;}
    .logo4{ flex: 2.8;}
    .logo5{ flex: 2.43;}

<div class = "how-to-buy">
        <p>This collection includes nineteen tales of faeries and magic at Midwinter. Available Now online:</p>
        <div class = "ebook-links">
    	    <a href=#>
    	      <img class = "logo1" src = "https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/amazon-logo_black-300x145.png" /></a>
    	    <a href=#>
    		    <img class = "logo4" src = "https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/ibooks-300x108.png" /></a>
        </div>
</div>

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

Должна ли высота быть гибкой? Если нет, почему бы просто явно не установить максимальную высоту для логотипов?

— 23.08.2018 20:24

Хотите, чтобы все они были одинаковой высоты и ширины? Если да, хотите ли вы, чтобы они были обрезаны или растянуты, чтобы они имели одинаковый размер? Если нет, просто равной высоты или просто равной ширины?

— 23.08.2018 20:24

html css flexbox

23.08.2018 20:12

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Как насчет того, чтобы вы поместили max-height в тег img, если вы установите только 'width' или только 'height' для тега img, изображение не теряет соотношение сторон

.how-to-buy {
      /*rgba used to add opacity*/
      background-color: rgba(255,255,255,0.4);
      border: hidden;
      border-radius: 25px;
      /* make sure there is space between buttons and bottom of page */
      margin-bottom: 30px;
      padding: 10px;
      max-width: 90%;
      text-align: center;
    }
    .ebook-links img {
      border-radius: 15px;
      max-height:50px;
    }

    .ebook-links img:hover {
    }

    .how-to-buy{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .ebook-links{
      max-width: 80%;
    
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo1{ flex: 2.07;}
    .logo2{ flex: 2.4;}
    .logo3{ flex: 3;}
    .logo4{ flex: 2.8;}
    .logo5{ flex: 2.43;}

<div class = "how-to-buy">
        <p>This collection includes nineteen tales of faeries and magic at Midwinter. Available Now online:</p>
        <div class = "ebook-links">
    	    <a href=#>
    	      <img class = "logo1" src = "https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/amazon-logo_black-300x145.png" /></a>
    	    <a href=#>
    		    <img class = "logo4" src = "https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/ibooks-300x108.png" /></a>
        </div>
</div>

Надеюсь, это именно тот результат, который вы ищете

23.08.2018 20:48