Egy teljes oldalas Foundation 5 webhelyen dolgozom, amely mobilon is működni fog. Minden jól megy, kivéve egy problémát.
HTML és CSS
<div class="row collapse" id="banners">
<div id="cityView" class="large-6 columns small-6 columns">
<img data-interchange="[images/voip_site_top_img_box_left_2014_small.jpg, (default)], [images/voip_site_top_img_box_left_2014.jpg, (large)]">
</div>
<div id="cityOrange" class="large-6 columns small-6 columns">
<img data-interchange="[images/vi_site_top_img_right_2014_small.jpg, (default)], [images/vi_site_top_img_right_2014.jpg, (large)]">
</div>
</div><!--End Row-->
<div class="row" id="information">
<div id="informationContent" class="large-12 columns">
Content
</div>
#banners{
}
#cityView{
height:inherit;
}
#cityView img{
width:100%;
padding-bottom:1px;
}
#cityOrange{
height:inherit;
}
#cityOrange img{
width:100%;
}
Amikor betöltöm ezt a böngészőbe, a jobb oldali kép átméreteződik, és néhány képponttal kisebb lesz, mint a bal oldali kép.
Nem tudom újra létrehozni a jsFiddle-ben, ezért itt van egy képernyőkép
Nem tudom egyszerűen beállítani a méretet a CSS-ben, mert akkor a mobil verzióban a képek megtartják ezt, és túl nagyok. Hogyan tudom ezt megjavítani?
