높이와 너비가 다른 이미지가 거의 없습니다. 모든 이미지에서 높이가 같고 너비가 계산되어 네 개의 이미지가 모두 한 행에 화면에 맞도록 일련의 행으로 정렬하고 싶습니다.
이 코드 마녀는 큰 화면에서 작동하지만 작은 화면에서는 줄이 두 개로 나뉩니다. 너비가 화면에 맞도록 높이를 자동으로 조정해야합니다.
<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>
<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>
<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>
<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>
</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>
<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>
<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>
<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>
</br></br>
다음은 JSfiddle 예제입니다. http://jsfiddle.net/43G3w/1/
div퍼센트 너비 로 4 개의 이미지를 각각 묶는 것이 좋습니다 . 그런 다음를 사용 screen.availWidth하여 사용 가능한 너비를 얻고 백분율을 곱하여 픽셀 너비를 얻습니다. 이것을 4로 나누고 jQuery 또는 Javascript를 사용하여 각 이미지의 너비를 이것으로 설정하십시오 (각 이미지에 동일한 클래스를 사용하여 쉽게 만들 수 있음). float:left동일한 줄에 유지되도록 각 이미지의 CSS 에 추가 하는 것을 잊지 마십시오 .
도움이 되었기를 바랍니다.
CE
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다