更小的div中的大圖像

我試圖對齊滑塊div中心的圖像。我正在調整FlexSlider css。這裏是我的CSS代碼：更小的div中的大圖像

.flexslider {margin: 0; padding: 0; width: 600px; height:480px; overflow:hidden;margin-left:auto;margin-right:auto;} 
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ 
.flexslider .slides img {width:auto;height:100%; display: inline-block; text-align:center;}

一切工作就像我想要的，除了我希望更廣泛的圖像在div中居中。現在它是左對齊的。順便說一句，我無法使用背景圖片。有任何想法嗎？

我也試着申請了.flexslider .slides IMG：

margin-left:-50% ......沒有工作 margin-left:auto和margin-right:auto ......沒有工作 left:50%和right:50% ......不工作或者

來源

2012-11-18 larin555

我知道，但我說我不能使用背景圖像。謝謝 – larin555

哦，的確如此。 –

如果CMS可以在上傳時裁剪圖像，則不會爲滑塊劃傷頭部，客戶端將加載較小的圖像。當然，只有當你不需要在客戶端導航到圖像或類似的東西時纔有效，在這種情況下，你可以創建裁剪+原始圖像。 –

我自己發現了它。我只需要將text-align:center添加到.flexslider .slides > li系列，並且它有效。

來源

2012-11-18 23:47:17 larin555

要在寬度上居中你的形象，你可以這樣做：

<!-- The place you want the "centered image" --> 
<div style="position: relative;width: 600px;height: 480px;overflow: hidden;"> 
    <div style="position: absolute;left: -700px;width: 2000px;height: 480px;"> 
     <img src="image.jpg" style="margin: 0 auto;" /> 
    </div> 
</div>

以中心高度，你將有同樣的問題是每個人，但你可以創建一個表，只有一個單元格，使用vertical-align: middle;

<!-- The place you want the "centered image" --> 
<div style="position: relative;width: 600px;height: 480px;overflow: hidden;"> 
    <table style="position: absolute;left: -700px;top: -760px;width: 2000px;height: 2000px;"> 
     <tr><td style="vertical-align: middle;"><img src="image.jpg" style="margin: 0 auto;" /></td></tr> 
    </div> 
</div>

希望這有助於！

來源

2012-11-18 23:08:16

謝謝，但我只需要使用CSS。我正在從一個簡單的CMS平臺修改CSS文件，並使用FlexSlider作爲畫廊。我需要修改FlexSlider.css文件以使其工作。有任何想法嗎？ – larin555

嘗試這樣

HTML

<div class="imageContainer"> 
    <span style="width: 1000px; margin-left: -450px;"><img src="http://dummyimage.com/100x100/f0f/fff" /></span> 
</div>

CSS

.imageContainer { 
    border: 1px solid #444; 
    overflow: hidden; 
    width: 100px; 
    height: 100px; 
    margin: 15px; 
    text-align: center; 
} 
.imageContainer > span { 
    display: block; 
} 
.imageContainer > span > img { 
    display: inline-block; 
}

這將在所有的瀏覽器，使用IE6可能是個例外。

來源

2012-11-18 23:10:21

謝謝，但我需要一種可以處理任何大小圖像的方式。我希望每次上傳圖片時都能使用它。這就是爲什麼我需要使用我在第一篇文章中複製的相同CSS代碼。順便說一句，你可以粘貼一個鏈接，而不是從其他成員複製/粘貼答案;）http://stackoverflow.com/a/8150196 – larin555

在上傳時可以更容易地製作圖片的縮略圖嗎？ –

你是什麼意思？ – larin555

更小的div中的大圖像

回答

相關問題