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

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有一个名为imageholder的id

#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 个解决方案

解决方案1
2 已采纳 2012-01-17 04:59:18

解决方案2
0 2012-01-17 03:38:47

解决方案3
0

解决方案4
0 2012-01-17 06:13:17

解决方案5
0 2012-02-29 17:10:39

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

问题描述

5 个解决方案

解决方案1 2 已采纳 2012-01-17 04:59:18

解决方案2 0 2012-01-17 03:38:47

解决方案3 0

解决方案4 0 2012-01-17 06:13:17

解决方案5 0 2012-02-29 17:10:39

解决方案1
2 已采纳 2012-01-17 04:59:18

解决方案2
0 2012-01-17 03:38:47

解决方案3
0

解决方案4
0 2012-01-17 06:13:17

解决方案5
0 2012-02-29 17:10:39