问题描述
我已搜索解决我的问题,但尚未成功。
I have searched for a resolution to my problem, but have not yet been successful.
我在中有不同大小的图片Nivo Slider
,但我需要创建一个视口
,显示以 div
为中心的图像。
I have images of different sizes in Nivo Slider
, but I need to create a viewport
that displays the image centered in a div
. It's hard to explain, but I have included a diagram below.
图片必须以 div
为中心,而 div
也必须响应。我不希望 div
更改其大小,并希望图像创建一个隐藏的溢出
div
。
The image must be centered in a div
, while the div
must also be responsive. I don't want the div
to change its size and would like the image to create an overflow
that is hidden on the div
.
我尝试了 CSS
推荐答案
如果我正确理解你的想要实现的是这样的东西(取消注释 / * overflow:hidden; * /
):
If I understand correctly what you want to achieve is something like this (uncommenting /*overflow: hidden;*/
): DEMO
HTML
$ b
HTML:
<div>
<img src="http://i.imgur.com/cjgKmvp.jpg"/>
</div>
CSS:
div{
position: relative;
margin: 100px auto;
width: 400px;
height: 300px;
border: 3px solid red;
/*overflow: hidden;*/
}
img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
注意:我注释 overflow: code>,以便您可以看到图像的位置。
Note: I comment overflow: hidden;
so you can see how the image is positioned.
这篇关于Nivo Slider自定义高度/宽度问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!