如何在不調整大小的情況下以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顯示圖像

回答

相關問題