html - 试图环绕照片

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

我建议将图像放置为 abackground-image并将其设置background-position为center center.

Answer 2

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

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

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

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

请记住，在这两种情况下，您都需要height为您的div.