Question

我正在尝试使图像保持在主框中心并且仍然被包裹在边框内，这是自动的，因为有几张图片并且它们的大小不同。

这是css：

.bild2  {
border:3px solid #999;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-opera-border-radius:8px;
-khtml-border-radius:8px;
border-radius:20px;
box-shadow:rgba(0,0,0,0.5) 0px 0px 24px;
height: auto;
overflow: hidden;
margin: auto;

}

和html：

<div class="bild2" style="width:406px;">
  <a href="../index.html">
    <img src="images/boyP.jpg" onclick="var node=parentNode.parentNode.parentNode.parentNode; if( node.click ) { return node.click(); } else { return true; }">
  </a>
</div>

Answer 1

我建议将图片设为background-image并将background-position设置为center center。

Answer 2

以下是使用background-image代替<img>的解决方案：

http://jsfiddle.net/XhtTJ/1/

这是<img>定位的解决方案：

http://jsfiddle.net/myRKK/1/

请记住，在这两种情况下，您都需要为height设置div。

试着把照片包起来

2 个答案: