1

我有一个160x160像素的 div。我想在这个 div 中显示图像。我想在不调整大小的情况下在 div 中显示图像。

  • 如果图像小于 div，则在 div 的中心显示图像而不调整大小。
  • 如果图像大于 div，则在 div 中显示图像的中心部分而不调整其大小。

这个 div 就像现实世界中的一个窗口。您可以根据窗口的大小从该窗口查看视图。

我想你能理解这个吗？

谢谢

4

6 回答 6

7

只需使用这样的简单背景图像：

div {background:url(image.jpg) 50% 50% no-repeat; height:160px; width:160px}

如果你想使用实际的<img>，你可以这样做：

<div><img src="image.jpg" /></div>​​​​​​​​​​​​​

div {position:relative; text-align:center; overflow:hidden; height:160px; width:160px}
img {position:absolute; left:50%; margin-left:-250px}​

图像宽度的一半在哪里margin-left- 仅在您提前知道图像尺寸时才有效。如果您不知道，您可以获取图像大小并使用 JavaScript 执行此操作吗？

于 2012-09-11T07:02:42.303 回答
3 
<div><img src="yourimage.jpg" /></div>

div{width:auto; margin:0 auto}
div img{max-width:100%}

max-width 将最大宽度作为图像的原始尺寸。即使您调整窗口大小，您也可以看到较小图像的效果。

于 2012-09-11T06:57:23.993 回答
1

我想这就是你需要的......

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #imageLoader{
                border:1px solid #B0B0B0;
                height:160px;
                width:160px;
                background-image: url('images/Science.png');
                background-position:center center;
                background-repeat:no-repeat;
                background-clip:content-box;
            }
        </style>
    </head>
    <body>
        <div id="imageLoader" style="">
        </div>
    </body>
</html>

相应地更改图像名称...

这是我的 小提琴

于 2012-09-11T09:30:52.110 回答
1

您还可以将图像设置为背景

background: url('image.png') no-repeat center center;

这是一个例子：http: //jsfiddle.net/H5U3H/

于 2012-09-11T07:03:33.150 回答
0

最好的方法是将图像设置为 div 的背景图像。

div { 
    background: transparent url(path/to/image.jpg) no-repeat center 0; 
    width: 160px; 
    height: 160px; 
}

如果图像大于 div，它将使图像居中，否则它将在 div 的（水平）中心显示图像。

于 2012-09-11T07:02:08.317 回答
0

我对此的看法，您不需要使用 transform / top / left 知道图像的宽度：

<div style=" overflow: hidden; width: 160px; height: 160px">
  <img src='https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' style="position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%)"/>
</div>

于 2019-09-25T08:14:34.907 回答