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}中的每组4幅图像用宽度百分比括起来。然后使用div获取可用宽度并将其乘以百分比以获得像素宽度。将其除以4并使用jQuery或Javascript将每个图像的宽度设置为此（考虑在每个图像上使用相同的类以使其更容易）。请务必在每张图片的CSS中添加screen.availWidth，以确保它们保持在同一条线上。

希望这有帮助。
C.E。

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

1 个答案: