Как динамически изменять размер списка изображений в отзывчивой теме?

Question

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

Если вы идете в http://digitaldemo.net/landmark/ и смотреть вниз на дно, есть горизонтальный список изображений, которые кодируются так:

<ul> 
<li>image 1</li> 
<li>image 2</li> 
<li>image 3</li> 
<li>image 4</li> 
<li>image 5</li> 
</ul> 

На экранах 480px рес или менее, список становится 3 изображения вместо из 5, но мне также хотелось бы , чтобы изменить размер изображений, как это делает топовое изображение. Я смог получить изображение мачты, чтобы изменить размер, добавив max-width:100%, но это не сработало для этого списка изображений.

Любая помощь будет оценена!

Спасибо,

Cynthia

Answer 1

Прежде всего, показывая и скрывая то, что в основном тот же элемент на два разных размерах, я думаю, что вы подходите к проблеме с совершенно неправильной стороны: от практичности точка зрения (что, если пользователь с программой чтения с экрана посещает ваш сайт?), от стандарты кодирования точка зрения (раздутый код, сложный для обслуживания, DRY) и от SEO перспектива (дублированный контент?).

Во-вторых, у вас есть два разных элемента, используя тот же id. Это не должно случиться: the ids must be unique.

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

#scroll.mobile ul { 
    width: 100%; 
} 

#scroll.mobile li { 
    width: 33%; /* You wanted three images per row, right? */ 
} 

#scroll.mobile li img { 
    max-width: 100%; 
} 

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