Сохраняйте ширину галереи изображений 100 % без пустого пространства по бокам.

Gnom2

Привет.

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

Можно ли это сделать в CSS или нужен Javascript? Я отказываюсь от использования тяжелых фреймворков Javascript, таких как jQuery, поскольку доступность гораздо важнее этой детали.

CSS:

 


<!DOCTYPE html><html lang="es"><head><meta charset="utf-8">


<meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1">


<link rel="stylesheet" href="screen.css" media="screen,projection,tv">


<title>


Gallery Test


</title>


</head><body>


<h1>


Gallery test


</h1>


<ul class="gallery">


<li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="[URL='https://lumtu.com/yti/MzggzMDBodHRwOi8vcGxhY2Vob2xkLml0LzQwMHwQz']http://placehold.it/400x300[/URL]"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="[URL='https://lumtu.com/yti/MzggzMDBodHRwOi8vcGxhY2Vob2xkLml0LzQwMHwQz']http://placehold.it/400x300[/URL]"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="[URL='https://lumtu.com/yti/MzggzMDBodHRwOi8vcGxhY2Vob2xkLml0LzQwMHwQz']http://placehold.it/400x300[/URL]"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="[URL='https://lumtu.com/yti/MzggzMDBodHRwOi8vcGxhY2Vob2xkLml0LzQwMHwQz']http://placehold.it/400x300[/URL]"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="[URL='https://lumtu.com/yti/MzggzMDBodHRwOi8vcGxhY2Vob2xkLml0LzQwMHwQz']http://placehold.it/400x300[/URL]"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="[URL='https://lumtu.com/yti/MzggzMDBodHRwOi8vcGxhY2Vob2xkLml0LzQwMHwQz']http://placehold.it/400x300[/URL]"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="[URL='https://lumtu.com/yti/MzggzMDBodHRwOi8vcGxhY2Vob2xkLml0LzQwMHwQz']http://placehold.it/400x300[/URL]"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="[URL='https://lumtu.com/yti/MzggzMDBodHRwOi8vcGxhY2Vob2xkLml0LzQwMHwQz']http://placehold.it/400x300[/URL]"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="[URL='https://lumtu.com/yti/MzggzMDBodHRwOi8vcGxhY2Vob2xkLml0LzQwMHwQz']http://placehold.it/400x300[/URL]"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="[URL='https://lumtu.com/yti/MzggzMDBodHRwOi8vcGxhY2Vob2xkLml0LzQwMHwQz']http://placehold.it/400x300[/URL]"


>


</a>


</li>


</ul>


</body>


</html>

Код (разметка): HTML:

  /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul,dl,dt,dd, table,tr,td,th,p,img,pre { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } .gallery { text-align:center; padding:0; margin:0; } .gallery li { list-style:none; display:inline; margin-left:0.75em; } .gallery a { display:inline-block; padding-bottom:0em; text-decoration:none; } .gallery img { display:block; max-width:100%; margin:0 auto 1em; vertical-align:bottom; /* prevent oddball bottom padding */ }

Код (разметка):

Wisba Party

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

 
img {

max-width:100%;

height:auto;

display:inline-block;
}

@media (min-width: 25em) {

img {

max-width:48%;

}
}

@media (min-width: 35em) {

img {

max-width:24%;

}
}

Код (разметка):

 <img src="[URL='https://lumtu.com/yti/cq55qcGdodHRwczovL3dlYnBhZ2VmeC5jb20vYmxvZy9pbWFnZXMvYXNzZXRzL2Nkbi5zaXhyZXZpc2lvbnMuY29tLzA0NzYtMDEtcmVzcG9uc2l2ZS1pbWFnZXMtZGVtby9pbWFnZXMvaW1hZ2UwMSwU2']https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image01.jpg[/URL]" width="960" height="640" alt="..." > <img src="[URL='https://lumtu.com/yti/cq55qcGdodHRwczovL3dlYnBhZ2VmeC5jb20vYmxvZy9pbWFnZXMvYXNzZXRzL2Nkbi5zaXhyZXZpc2lvbnMuY29tLzA0NzYtMDEtcmVzcG9uc2l2ZS1pbWFnZXMtZGVtby9pbWFnZXMvaW1hZ2UwMiwU2']https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image02.jpg[/URL]" width="960" height="640" alt="..." > <img src="[URL='https://lumtu.com/yti/cq55qcGdodHRwczovL3dlYnBhZ2VmeC5jb20vYmxvZy9pbWFnZXMvYXNzZXRzL2Nkbi5zaXhyZXZpc2lvbnMuY29tLzA0NzYtMDEtcmVzcG9uc2l2ZS1pbWFnZXMtZGVtby9pbWFnZXMvaW1hZ2UwMywU2']https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image03.jpg[/URL]" width="960" height="640" alt="..." > <img src="[URL='https://lumtu.com/yti/cq55qcGdodHRwczovL3dlYnBhZ2VmeC5jb20vYmxvZy9pbWFnZXMvYXNzZXRzL2Nkbi5zaXhyZXZpc2lvbnMuY29tLzA0NzYtMDEtcmVzcG9uc2l2ZS1pbWFnZXMtZGVtby9pbWFnZXMvaW1hZ2UwNCwU2']https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image04.jpg[/URL]" width="960" height="640" alt="..." >

Код (разметка):

Вячеслав В.

Если вы хотите сделать это адаптивным, чтобы число строк менялось в зависимости от ширины, внимательно посмотрите на nth-child.

Вы комбинируете его с :after и можете вставить уровень блока, чтобы принудительно выполнить перенос, если идеальная ширина не совпадает (например, 33,33% для трех поперек - это заноза в заднице). Иногда также помогает, если они неправильно отбрасываются (благодаря FF, являющемуся переосмыслением дробей), использовать nth-child для нацеливания на последнюю и задать для нее поле-право:-1em; делая его на волос уже, заставляя его вернуться на правильную линию.

Просто некоторые крайние случаи, с которыми вы можете столкнуться при использовании %widths и исправлений - если у вас возникнут такие проблемы.

TheHolms

Используйте запросы Скрытая информация :: Авторизуйтесь для просмотра »
.
https://jsfiddle.net/pefx1897/2/

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

 


img {


width: 100%;


height: auto;


}


.breakpoint {


/* One column for smartphones */


max-width: 100%;


display: inline-block;


}


@media (min-width: 420px) {


/* Two columns for tablets */


.breakpoint {


max-width: 48%;


}


}


@media (min-width: 760px) {


/* Four columns for large devices */


.breakpoint {


max-width: 24%;


}


}

Код (разметка):

  <img class="breakpoint" src="[URL='https://lumtu.com/yti/cq55qcGdodHRwczovL3dlYnBhZ2VmeC5jb20vYmxvZy9pbWFnZXMvYXNzZXRzL2Nkbi5zaXhyZXZpc2lvbnMuY29tLzA0NzYtMDEtcmVzcG9uc2l2ZS1pbWFnZXMtZGVtby9pbWFnZXMvaW1hZ2UwMSwU2']https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image01.jpg[/URL]" width="960" height="640" /> <img class="breakpoint" src="[URL='https://lumtu.com/yti/cq55qcGdodHRwczovL3dlYnBhZ2VmeC5jb20vYmxvZy9pbWFnZXMvYXNzZXRzL2Nkbi5zaXhyZXZpc2lvbnMuY29tLzA0NzYtMDEtcmVzcG9uc2l2ZS1pbWFnZXMtZGVtby9pbWFnZXMvaW1hZ2UwMiwU2']https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image02.jpg[/URL]" width="960" height="640" /> <img class="breakpoint" src="[URL='https://lumtu.com/yti/cq55qcGdodHRwczovL3dlYnBhZ2VmeC5jb20vYmxvZy9pbWFnZXMvYXNzZXRzL2Nkbi5zaXhyZXZpc2lvbnMuY29tLzA0NzYtMDEtcmVzcG9uc2l2ZS1pbWFnZXMtZGVtby9pbWFnZXMvaW1hZ2UwMywU2']https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image03.jpg[/URL]" width="960" height="640" /> <img class="breakpoint" src="[URL='https://lumtu.com/yti/cq55qcGdodHRwczovL3dlYnBhZ2VmeC5jb20vYmxvZy9pbWFnZXMvYXNzZXRzL2Nkbi5zaXhyZXZpc2lvbnMuY29tLzA0NzYtMDEtcmVzcG9uc2l2ZS1pbWFnZXMtZGVtby9pbWFnZXMvaW1hZ2UwNCwU2']https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image04.jpg[/URL]" width="960" height="640" />

Код (разметка): Источник: https://www.webpagefx.com/blog/imag...com/0476-01-responsive-images-demo/index.html

вар1

Спасибо за указатель.

Вы имеете в виду что-то подобное для первой части? CSS:

 


<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">


<meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1">


<link rel="stylesheet" href="screen.css" media="screen,projection,tv">


<title>


Gallery Test


</title>


</head><body>


<h1>


Gallery test


</h1>


<div class="wrapper">


<ul class="gallery">


<li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="image.png"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="image.png"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="image.png"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="image.png"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="image.png"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="image.png"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="image.png"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="image.png"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="image.png"


>


</a>


</li><li>


<a href="#">


<img


alt="Описание изображения"


width="200"


height="150"


src="image.png"


>


</a>


</li>


</ul>


<!-- .wrapper --></div>


</body>


</html>

Код (разметка): HTML:

  /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul,dl,dt,dd, table,tr,td,th,p,img,pre { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } .wrapper { background:#00F; max-width:60em; margin:0 auto; } .gallery li { list-style:none; display:inline; } .gallery a { display:inline-block; } li:nth-child(3n):after { display:block; content:""; } @media(max-width:39em) { .wrapper { background:#F00; } li:nth-child(3n):after { display:none; } li:nth-child(2n):after { display:block; content:""; } }

Код (разметка): Теперь я застрял, пытаясь заставить изображения автоматически изменять размер, когда они находятся внутри . image.png — это изображение-заполнитель размером 400x300 пикселей.

Похожие темы	Дата
Исследование времени/Извлечение и ввод данных из базы данных	19.10.2024, 18:10
как пожелать кому-то удачи??(особенно СОБСТВЕННО)	19.10.2024, 18:10
Какую часть кода AdSense удалить	19.10.2024, 18:10
счетчик просмотров постов wp не работает	19.10.2024, 18:10
Лучший выбор для контекстной рекламы (не программиста)?	19.10.2024, 18:10
Изображения категорий продуктов слишком большие	19.10.2024, 18:10
Начинаем заниматься веб-дизайном и разработкой в 2017 году?	19.10.2024, 18:10
Создать шаблон/тему для Codeigniter	19.10.2024, 18:10
Опыт Чоуноу/Grubhub?	19.10.2024, 18:10
Показывать «это», если на рабочем столе, и показывать «то», если на мобильном устройстве	19.10.2024, 18:10

Сохраняйте ширину галереи изображений 100 % без пустого пространства по бокам.

Gnom2

Wisba Party

Вячеслав В.

TheHolms

вар1

I AM

Интересно