Php 调整图像大小，使其适合屏幕

我有几个不同高度和宽度的图像。我想将它们对齐成一组行，这样所有图像上的高度都是相同的，并且计算宽度，这样所有四个图像都可以在一行中显示屏幕

我正在使用这个代码，它在我的大屏幕上工作，但在小屏幕上，这条线被一分为二。我需要自动调整高度，使宽度适合屏幕

<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>

---

下面是JSFIDLE示例

我建议将每组4个图像以一定的宽度封装在

div

中。然后使用

screen.availWidth

获得可用宽度，并将其乘以百分比得到像素宽度。将该值除以4，然后使用jQuery或Javascript将每个图像的宽度设置为该值（考虑在每个图像上使用相同的类以简化此操作）。记住向每个图像的CSS添加

float:left

，以确保它们保持在同一行

希望这有帮助。
C.E