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

Question

I have a DIV that is changing size depending on the browser window. 我有一个DIV，根据浏览器窗口改变大小。 I have an image inside of it which in effect will essentially fill up the entire browser window, and I need it to resize without stretching out of proportion when the window gets too wide or too long. 我内部有一个图像，实际上它基本上会填满整个浏览器窗口，我需要它在窗口变得太宽或太长时调整大小而不会拉伸不成比例。

Additionally I need to have the image centred so you see the 'sweet spot' of the image when it becomes too big for the browser window. 此外，我需要让图像居中，这样当图像变得太大而无法浏览器窗口时，您会看到图像的“最佳点”。

I've been searching for ages and trying many different things but I can't work it out for the life of me. 我一直在寻找年龄和尝试许多不同的东西，但我无法解决我的生活。 Perhaps it could be solved with Javascript or jQuery? 也许它可以用Javascript或jQuery解决？

This is the CSS I have so far of the DIV id and the IMAGE class: 这是我到目前为止的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;
}

It's scaling up and down but starts to 'squash' horizontally when the window gets to thin, and it isn't centering. 它正在向上和向下缩放，但是当窗口变薄时开始水平“压扁”，并且它不是居中的。

Answer 1

Give it a try 试试看

<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>

Hope this solves your problem. 希望这能解决你的问题。

Answer 2

assuming the div have an id named imageholder 假设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%;}

hope that helps 希望有所帮助

also while re-sizing the div. 同时重新调整div的大小。 set the image max-height and max-width to its original dimension. 将图像max-height和max-width设置为其原始尺寸。

Answer 3

img {

      margin : 0 auto;
      display:block;
}

give it a try. 试试看。

position your div as you want. 根据需要定位你的div。

Answer 4

Try this JavaScript: 试试这个JavaScript：

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

I'm not sure it's what your looking for but it could be expanded/edited, to be better. 我不确定这是你想要的，但它可以扩展/编辑，更好。 I'm not completely certain about what it is your after. 我不完全确定你的追求是什么。

Edit: Try this full page version: http://www.teaksoftware.com/html/ 编辑：试试这整页版本： http ： //www.teaksoftware.com/html/

Answer 5

There's a CSS3 property but i'm not sure about the support it has. 有一个CSS3属性，但我不确定它有什么支持。

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

This prevents the image from being stretched. 这可以防止图像被拉伸。
Given that it's only ONE line of CSS you can try it out. 鉴于它只有一行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