如何在不调整大小的情况下以div显示图像

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

如果图像小于div，则在div中间显示图像而不调整大小。
如果图片比较大，那么div会在div中显示图片的中心部分而不调整其大小。

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

我想你能理解这个吗？

由于

来源

2012-09-11 Awan

你可以使用CSS3的背景夹属性来裁剪图像或使用剪辑属性 – Nilesh

哎，刚注意到你不接受这个答案。你解决了问题吗？ :) – zenkaty

<div><img src="yourimage.jpg" /></div> 

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

最大宽度取最大宽度与图像的原始尺寸。即使你调整窗口大小，你也可以看到小图像的效果。

来源

2012-09-11 06:57:23 Sowmya

OP不想调整图像的大小，如果它的大小大于格。设置最大宽度将最终调整图像的大小 – Nilesh

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

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

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

来源

2012-09-11 07:02:08 Brentoe

如果要将其显示为真实图像，这不是一个好的解决方案。由于背景在facebook上的表现完全不同。找到标记中的图像作为链接的可能缩略图，但背景不是。 Google等抓取工具还存在其他问题。另外，如果您将它作为真正的，则可以为盲人添加替代文本。这更友好，因此更好。另外，如果CSS没有加载？然后图像将不会显示。背景不是图像。 – Jelmer

只要用这样一个简单的背景图片：如果你想使用一个实际的

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-11 07:02:42 zenkaty

但是如果他想通过引用它以某种方式使用图像呢？ – think123

我不明白你的意思？ – zenkaty

就像他想在用户点击它时运行事件一样，在它上面盘旋，等等...... – think123

您还可以设置图片为背景

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

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

来源

2012-09-11 07:03:33 Peon

我觉得这是你需要什么.....

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

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

这里是我的Fiddle

来源

2012-09-11 09:30:52

如何在不调整大小的情况下以div显示图像

回答

相关问题