更小的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中的大图像

回答

相关问题