Изменить размеры изображений так, чтобы они соответствовали экрану

Question

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

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

<a href="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/ad_vm-va10m_si-sw_01.png"><img src="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/ad_vm-va10m_si-sw_01.png" height="340" ></a> &nbsp;&nbsp; 
<a href="http://www.arso.gov.si/vreme/napovedi%20in%20podatki/dada/AD00_vf10H_KP_006.png"><img src="http://www.arso.gov.si/vreme/napovedi%20in%20podatki/dada/AD00_vf10H_KP_006.png" height="340" ></a>&nbsp;&nbsp; 
<a href="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/as_tcc-rr_si-neighbours_01.png"><img src="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/as_tcc-rr_si-neighbours_01.png" height="340" ></a> &nbsp;&nbsp; 
<a href="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/as_t2m_si-neighbours_01.png"><img src="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/as_t2m_si-neighbours_01.png" height="340" ></a> &nbsp;&nbsp; 
</br></br> 

<a href="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/ad_vm-va10m_si-sw_02.png"><img src="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/ad_vm-va10m_si-sw_02.png" height="340" ></a> &nbsp;&nbsp; 
<a href="http://www.arso.gov.si/vreme/napovedi%20in%20podatki/dada/AD00_vf10H_KP_009.png"><img src="http://www.arso.gov.si/vreme/napovedi%20in%20podatki/dada/AD00_vf10H_KP_009.png" height="340" ></a>&nbsp;&nbsp; 
<a href="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/as_tcc-rr_si-neighbours_02.png"><img src="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/as_tcc-rr_si-neighbours_02.png" height="340" ></a> &nbsp;&nbsp; 
<a href="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/as_t2m_si-neighbours_02.png"><img src="http://meteo.arso.gov.si/uploads/probase/www/model/aladin/field/as_t2m_si-neighbours_02.png" height="340" ></a> &nbsp;&nbsp; 
</br></br> 

Вот пример JSfiddle http://jsfiddle.net/43G3w/1/

Answer 1

Я рекомендую вмещающий каждый набор из 4 изображений в пределах div с процентом шириной. Затем используйте screen.availWidth, чтобы получить доступную ширину и умножить ее на процент, чтобы получить ширину пикселя. Разделите это на 4 и используйте jQuery или Javascript, чтобы установить ширину каждого из изображений на это (подумайте об использовании одного и того же класса на каждом изображении, чтобы сделать это проще). Не забудьте добавить float:left в CSS каждого изображения, чтобы убедиться, что они остаются на одной линии.

Надеюсь, это поможет.
C.E.