Question

我尝试在框架内设置图像。

风格

#wrapper {
        border: 2px solid black;
        width: 600px;
        height: 400px;
        overflow:hidden;
        position: relative;
        display: inline-block;
    }
    img{
        position: absolute;
        height:auto;
    }

HTML

<div id="wrapper">
    <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="our img"  />
</div>
<br>
<div id="wrapper">
    <img src="http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg" alt="our img"  />
</div>

有没有办法确保图片显示在this之类的框架中间？

Answer 1

这样的事情：

＆＃13;

#wrapper {
        border: 2px solid black;
        width: 600px;
        height: 400px;
        overflow:hidden;
        position: relative;
        display: inline-block;
        text-align:center;
    }
img{
      max-width: 100%;
}

＆＃13;

<div id="wrapper">
    <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="our img"  />
</div>
<br>
<div id="wrapper">
    <img src="http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg" alt="our img"  />
</div>

＆＃13;

Answer 2

你可以这样做：

使用@disable垂直和水平居中图像

<强> CSS

transform

<强> DEMO HERE

Answer 3

这将使您的img{ position: absolute; height:auto; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }：

居中

img

Answer 4

这是我的建议：

#wrapper {
    text-align:center;
    border: 2px solid black;
    width: 600px;
    height: 400px;
    overflow:hidden;
    position: relative;
}
img{
    display: inline-block;
    height:auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

工作小说：https://jsfiddle.net/o0efwd20/

如何在画面中间放置任意尺寸的图像

4 个答案: