#html #css
Вопрос:
Я пытаюсь изменить размер своих изображений до размера контейнера, а при изменении размера в режиме планшета или телефона увеличьте размер контейнера и отрегулируйте его размер, однако мои изображения просто слишком увеличены, вот так: я не уверен, что я здесь делаю неправильно
<div class="ps-section--homeCenter" style="display:grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 213px 213px; grid-gap: 10px; padding:0; margin: 0; box-sizing: border-box;">
<div class="gallery_container">
<div class="gallery_Item" style="width:100%; height: 100%; position: relative;">
<div class="imgInGallery" style="width: 100%; height: 100%; overflow:hidden;">
<img src="http://placekitten.com/500/400" style=" object-fit: cover; object-position: 50% 50%;" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item" style="overflow:hidden;">
<div class="imgInGallery" style="display:flex; height: 100%; align-items:center">
<img src="http://placekitten.com/300/200" style="
max-height:100%; max-width: 100%; align-self:center; " />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item" style="width:100%; height: 100%; position: relative;">
<div class="imgInGallery" style="width: 100%; height: 100%; overflow:hidden;">
<img src="http://placekitten.com/100/300" style="object-fit:cover; width: 100%; " />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item" style="width:100%; height: 100%; position: relative;">
<div class="imgInGallery" style="width: 100%; height: 100%; overflow:hidden;">
<img src="http://placekitten.com/300/800" style="width:100%; height:100%; object-fit: cover;" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item" style="width:100%; height: 100%; position: relative;">
<div class="imgInGallery" style="width: 100%; height: 100%; overflow:hidden;">
<img src="http://placekitten.com/200/300" style="width:100%; height:100%; object-fit: cover;" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item" style="width:100%; height: 100%; position: relative;">
<div class="imgInGallery" style="width: 100%; height: 100%; overflow:hidden;">
<img src="http://placekitten.com/200/600" style="width:100%; height:100%; object-fit: cover;" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item" style="width:100%; height: 100%; position: relative;">
<div class="imgInGallery" style="width: 100%; height: 100%; overflow:hidden;">
<img src="http://placekitten.com/200/200" style="width:100%; height:100%; object-fit: cover;" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item" style="width:100%; height: 100%; position: relative;">
<div class="imgInGallery" style="width: 100%; height: 100%; overflow:hidden;">
<img src="http://placekitten.com/200/400" style="width:100%; height:100%; object-fit: cover;" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item" style="width:100%; height: 100%; position: relative;">
<img src="http://placekitten.com/200/800" style="width:100%; height:100%; object-fit: cover;" />
</div>
</div>
</div> Комментарии:
1. Пожалуйста, используйте CSS. Это решит половину ваших проблем в будущем.
2. К сожалению, весь CSS встроен.
3. Тот факт, что изображения увеличены, объясняется тем, что вы использовали
object-fit: cover. Это означает, что размер изображения изменен таким образом, чтобы не осталось пробелов…
Ответ №1:
У вас есть много фотографий с разными соотношениями сторон. Поместив их в сетку, где высота строки одинакова для всех фотографий в строке, вы почти наверняка обнаружите, что некоторые фотографии можно разместить только с помощью обложки (как вы это сделали), что означает, что либо стороны, либо верх/низ будут обрезаны, а фотографии будут увеличены.
Учитывая выбор соотношений сторон, я задаюсь вопросом, подходит ли сетка (в интерпретации CSS-сетки)? Если вы придерживаетесь сетки, то вы, вероятно, захотите рассмотреть использование contain, а не обложки, чтобы убедиться, что все фотографии видны, и смириться с тем, что между ними разные промежутки.
Однако, учитывая широкий выбор соотношений сторон, может быть полезно рассмотреть макет с более каменной кладкой, где фотографии рядом друг с другом могут иметь разную высоту, но все это сохраняет компактный вид.
См., например, MDN для предварительного обсуждения потенциальной функции CSS:
Компоновка каменной кладки-это метод компоновки, при котором одна ось использует типичную строгую сетку, чаще всего состоящую из столбцов, а другая-компоновку каменной кладки. На оси кладки вместо того, чтобы придерживаться строгой сетки с зазорами, оставляемыми после более коротких элементов, элементы в следующем ряду поднимаются, чтобы полностью заполнить пробелы.
Поскольку это экспериментально и только в Firefox на данный момент, использование библиотеки, которая будет помещать ваши изображения в столбцы, причем каждое изображение будет иметь свою собственную подходящую высоту, может быть правильным решением. Существует несколько библиотек, которые делают это, хотя всего для двух столбцов не так уж сложно выполнить арифметику для этого — решить, с чего начать второй столбец.
Ответ №2:
При использовании object-fit: cover тега изображения он, по сути, будет действовать как фоновое изображение. Он растянется, чтобы заполнить контейнер либо по горизонтали, либо по вертикали, в зависимости от соотношения сторон родительского элемента и самого изображения.
Если вы не хотите, чтобы изображения растягивались или «увеличивались», вы можете использовать object-fit: contain , но тогда изображение не растянется, чтобы заполнить ваш контейнер.