0

嗨 - 任何人都知道我如何将 div 包裹在（或将其放置在）绝对定位的流体宽度/高度图像周围。我想不通。

谢谢 B。

<div class="wrap">
<img src="http://placekitten.com/g/500/500"/>
</div>

和...

img{
position:absolute; 
top:0; bottom:0; left:0; right:0;
max-width:100%; 
max-height:100%;
margin:auto;
}

.wrap{
border:5px solid red;
display:block;
}

这是一个：http: //jsfiddle.net/20owLkxy/1/

4

4 回答 4

1

div需要在那里吗？如果您只想要一个边框，请完全删除 div 并在图像上设置边框。

于 2014-10-15T12:47:54.613 回答
0

也许做这样的事情http://jsfiddle.net/20owLkxy/2/

图像将绝对定位在相对位置的包裹内。您需要做的另一件事是给出换行宽度和高度:)

*{
    margin: 0px;
}
body, html{
    height: 100%;
}
img{
    position:absolute; 
    top:0; bottom:0; left:0; right:0;
    max-width:100%; 
    max-height:100%;
    margin:auto;
    }

.wrap{
    width: 100%;
    height: 100%;
    border:5px solid red;
    display:block;
    position: relative;
    }

如果你想要流畅的图像，你不需要绝对定位它。一些css可以解决问题。

示例http://jsfiddle.net/20owLkxy/4/

* {
    margin: 0px;
}
body, html {
    height: 100%;
}
img {
    max-width:100%;
    height:auto;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
.wrap {
    width: 100%;
    height: auto;
    border:5px solid red;
    display:block;
    position: relative;
}
于 2014-10-15T11:37:03.737 回答
0

如果你想让你的图像流畅，那么不需要给它一个position:absolute，请看我分享的小提琴

http://jsfiddle.net/20owLkxy/6/

我使它变得流畅，就像当您调整窗口大小时，您可以在小提琴中看到结果。

于 2014-10-15T11:45:27.030 回答
0

一种解决方案是使用 div 背景图像：

<div class="image"></div>

...

div.image {
content:url(http://placekitten.com/g/300/300);
float:left;
}

div.image{
display:inline;
background:red;
border:5px solid green;
position:absolute; 
top:0; bottom:0; left:0; right:0;
max-width:100%; 
max-height:100%;
margin:auto;
}

这是一个 jsfiddle — http://jsfiddle.net/2z2osu7r/

于 2014-10-15T19:51:52.883 回答