Как предотвратить получение слишком больших изображений при более низком разрешении? - PullRequest
Новая
       36

Как предотвратить получение слишком больших изображений при более низком разрешении?

1 голос
/ 17 июня 2020

Здравствуйте. У меня проблемы с форматом представления трех элементов! html {font-size: 62.5%} в стиле уменьшает размер шрифта на всей странице.

Когда я отключаю html {font-size: 62.5%}, три элемента становятся шире! Почти широкоформатный! Он становится слишком большим! Интересно, почему font-size: 62.5%; так сильно влияет на форматирование 3-х блоков! font-size: 62,5 - это настройка шрифта?

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

ссылка

Ответы [ 2 ]

2 голосов
/ 17 июня 2020

Шрифты, основанные на элементе html и / или body, являются реляционными и, как и любые другие свойства и значения CSS, применяемые к этим селекторам, наследуются. Здесь есть все, что касается относительных размеров шрифта и единицы измерения CSS em. Ответ Арно покрывает это довольно прилично.

Это в основном для того, чтобы вы двигались вперед с меньшим кодом . Вы можете масштабировать изображения с разрешением. У меня разрешение 2560x1440, поэтому мне пришлось уменьшить размер окна браузера, чтобы увидеть проблему. Вам следует удалить свойство width и вместо этого использовать max-width: 33%; (конкретно для трех изображений), которое хорошо масштабируется, даже не требуя CSS медиа-запросов для мобильных устройств.

Go легко для этих div элементов ! Я также настоятельно рекомендую ознакомиться с тем, какие стабильные аспекты CSS доступны, это прекрасное время для новичка ie по сравнению с 15 годами go! Я добавил CSS Flex (Grid еще не так развит еще ), и он становится чрезвычайно мощным, если вы обойдете его причуды. 

div.card
{
 display: flex;
 justify-content: space-evenly;
}

div.card img
{
 display: block;
 height: 18rem;
 max-width: 33%;
 object-fit: cover;
}

<div class="card">
<img alt="Snowy Mountains" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />
<img alt="Desert" src="https://images.unsplash.com/photo-1485160497022-3e09382fb310?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />
<img alt="Canyons" src="https://images.unsplash.com/photo-1506318164473-2dfd3ede3623?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />
</div>
1 голос
/ 17 июня 2020

font-size: 62,5% является важной частью работы этого макета, потому что он основан на rem. rem единицы основаны на размере шрифта root документа, чтобы унаследовать его значение. Установка font-size на 62,5% означает, что 1rem равно 10px.

Подробнее об использовании rem и стилях здесь: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/.

Там Есть два способа решить эту проблему.

Изменение всех размеров шрифта на единицы rem. (мой выбор)

Вы можете изменить размер шрифта с 16 пикселей до 1,6 rem. et c.

Измените единицы rem на em и установите родительский размер шрифта

Вы также можете удалить font-size: 62.5% из селектора html на #global-3blocksfancy и изменить * От 1023 * до em это означает, что размер шрифта родительского элемента (global-3blocksfancy) будет определять размер других элементов.

...