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

How to centre and scale up/down image within a resizing DIV

本文关键字：放大 图像 缩小 中居 DIV 调整      更新时间：2023-09-26

我有一个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;
}

它在向上和向下缩放，但当窗口变薄时，它开始水平"挤压"，而且它没有居中。

试试

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

希望这能解决你的问题。

假设div有一个名为图像支架

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

希望能帮助

同时重新调整div的大小。将图像的最大高度和最大宽度设置为其原始尺寸。

img {
      margin : 0 auto;
      display:block;
}

试试看。

根据需要定位div。

试试这个JavaScript:

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

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

编辑：尝试此整页版本：http://www.teaksoftware.com/html/

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

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

这样可以防止图像被拉伸
考虑到这只是CSS的一行，您可以尝试一下。

相关文章：