爲什麼我的圖片被裁剪？

我使用的iosslider腳本很好，但我無法弄清楚它爲什麼裁剪我的圖像而不是調整它們的大小。這裏是我的CSS樣式和jQuery電話：爲什麼我的圖片被裁剪？

CSS：

.iosSlider { 
/* required */ 
position: relative; 
top: 0; 
left: 0; 
overflow: hidden; 

width: 100%; 
height: 300px; 
} 


.iosSlider .slider { 
/* required */ 
width: 100%; 
height: 300px; 
} 


.iosSlider .slider .slide { 
/* required */ 
float: left; 
}

我的jQuery的電話：

$('.iosSlider').iosSlider({ 
     snapToChildren: true, 
     desktopClickDrag: true, 
     keyboardControls: true, 
     onSlideChange: slideChange 
    });

HTML：

<div class = 'iosSlider'> 
    <div class = 'slider'> 
     <div class="item"> 
      <img src="/some_img_1.png" /> 
     </div> 
       <div class="item"> 
      <img src="/some_img_2.png" /> 
     </div> 
    </div> 
</div>

任何想法，爲什麼我不能得到我的圖像調整到300px的高度？原件高600px，因此它們被削減了一半。我相信這是一個CSS問題，但我似乎無法追查。有什麼想法嗎？

來源

2012-12-03 Paul

有一件事我已經在你的HTML注意的是，你還沒有使用類「.slide」，這是目前在你的CSS 。請檢查。 –

您的CSS規則僅對包含圖像的div應用高度。如果你想在圖像的大小，以300像素高，添加如下規則：

.iosSlider .slider .item img { 
    height: 300px; 
    width: auto; 
}

來源

2012-12-03 04:48:35

爲什麼我的圖片被裁剪？

回答

相關問題