Question

我有一个DIV，根据浏览器窗口改变大小。我内部有一个图像，实际上它基本上会填满整个浏览器窗口，我需要它来调整大小而不会在窗口变得太宽或太长时拉伸不成比例。

此外，我需要让图像居中，这样当图像对于浏览器窗口变得太大时，您会看到图像的“最佳点”。

我一直在寻找年龄并尝试许多不同的事情，但我不能为我的生活而努力。也许它可以用Javascript或jQuery解决？

这是我到目前为止的DIV id和IMAGE类的CSS：

#VisitUsSlides {
    height:100%;
    width:100%;
    position:absolute;
    top:0px;
    left: 0px;
}

.resizingImage {
    width:100%;
    min-width:100px;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
}

它正在向上和向下缩放，但当窗口变薄时开始水平“挤压”，并且它不是居中的。

Answer 1

试一试

<html>
<head>
<style type="text/css">
div
{ 
width:100%;
height:100%;
background-image:url('sample.jpg');
background-repeat:no-repeat;
background-attachment:fixed;//**Edit: Add this and check**
background-size:cover; //Edit2: Add this and check
background-position:center; 
}
</style>
</head>

<body>
<div>
</div>
</body>
</html>

希望这能解决你的问题。

Answer 2

假设div有一个名为的id imageHolder的原因

#imageholder{width:500px;height:500px;position:relative;}
#imageholder>img{width:90%;height:90%;position:absolute;z-index:10;top:5%;left:5%;}

希望有所帮助

同时重新调整div的大小。将图像max-height和max-width设置为其原始尺寸。

Answer 3

img {

      margin : 0 auto;
      display:block;
}

试一试。

根据需要定位你的div。

Answer 4

试试这个JavaScript：

http://jsfiddle.net/Teak/6yxcG/

我不确定这是你想要的，但它可以扩展/编辑，更好。我不完全确定你追求的是什么。

修改：试用此整页版本：http://www.teaksoftware.com/html/

Answer 5

有一个CSS3属性，但我不确定它有什么支持。

.resizingImage {
 height: 100%;
 width: 100%;
 object-fit: contain; /*OR*/
 object-fit: fill; /*there's also an object-position property*/
 }

这可以防止图像被拉伸鉴于它只有一行CSS，你可以尝试一下。

如何在调整大小的DIV中居中和放大/缩小图像

5 个答案: