• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать соотношение сторон изображения? (Изменение размера изображения CSS и сохранение пропорций)
Как сделать соотношение сторон изображения?
Kosten
Вторник, 05 Марта 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Аналогично по такой схеме, здесь разместим изображение, плюс каждому еще закрепим название на темно прозрачном фоне. Я большой поклонник CSS Grid, где в настоящее время используют практически во всех проектах. Однако есть одна часть, которая делает вещи намного более оригинальнее.

Сетка позволяет нам буквально определять линии сетки столбцов и строк, а затем прикреплять элементы к этим линиям в любом порядке, который мы выбираем. Это может звучать как таблицы, в нашем случай идет Grid, это намного больше, чем когда-либо мечтали.

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



И в этом мануале узнаем, почему они так чертовски полезны:

Приступаем к установке:

HTML

Код
<article>
  <div class="grid">
    <div class="decrenmeaning a"><img src="http://zornet.ru/_fr/56/4193617.jpg" alt="ZorNet - портал для вебмастера">
      
      <div class="mudesabeg">Несовместимые плагины </div>
    </div>

    <div class="decrenmeaning b"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_3.jpg" alt="">
      <div class="mudesabeg">Viewport не установлен </div>
    </div>
    
     <div class="decrenmeaning c"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_2.jpg" alt="">
      <div class="mudesabeg">Контент шире экрана</div>
    </div>

    <div class="decrenmeaning d"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_4.jpg" alt="">
      <div class="mudesabeg">Текст слишком мал для чтения</div>
    </div>

    <div class="decrenmeaning e"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_5.jpg" alt="">
      <div class="mudesabeg">Сжатые элементы слишком близко друг к другу</div>
    </div>

    <div class="decrenmeaning f"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_6.jpg" alt="">
      <div class="mudesabeg">Анализ скорости страницы Googled</div>
    </div>

    <div class="decrenmeaning g"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_7.jpg" alt="">
      <div class="mudesabeg">Результаты следует интерпретировать</div>
    </div>

    <div class="decrenmeaning h"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_8.jpg" alt="">
      <div class="mudesabeg">Никто не может отрицать</div>
    </div>

    <div class="decrenmeaning i"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_9.jpg" alt="">
      <div class="mudesabeg">Вы хотите одеться немного </div>
    </div>

    <div class="decrenmeaning j"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_10.jpg" alt="">
      <div class="mudesabeg">Загрузка</div>
    </div>

    <div class="decrenmeaning k"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_11.jpg" alt="">
      <div class="mudesabeg">Исследования McKinsey</div>
    </div>

    <div class="decrenmeaning l"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_12.jpg" alt="">
      <div class="mudesabeg">Некоторые люди говорят</div>
    </div>

    <div class="decrenmeaning m"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_13.jpg" alt="">
      <div class="mudesabeg">Просто введите свой URL</div>
    </div>
  </div>
</article>


CSS

Код
img {
  max-width: 100%;
}

.decrenmeaning {
  display: grid;
  grid-template-rows: 1fr auto;
}

.decrenmeaning img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  grid-row: 1 / 3;
  grid-column: 1;
}

.decrenmeaning .mudesabeg {
  grid-row: 2;
  grid-column: 1;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  color: #fff;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

@media (min-width: 800px) {
  .grid {
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    grid-auto-flow: dense;
  }

  .a {
    grid-column: span 2;
    grid-row: span 2;
  }

  .g {
    grid-column: span 2;
    grid-row: span 2;
  }

  
}


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

Демонстрация
Прикрепления: 0242831.jpg (52.8 Kb) · an-event-apart-.zip (2.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать соотношение сторон изображения? (Изменение размера изображения CSS и сохранение пропорций)
  • Страница 1 из 1
  • 1
Поиск: