Question

我在DIV中有一张图片。如果div的大小低于图像的大小，我希望图像缩小。我也希望图像在DIV中居中。

这是我的HTML：

   <div id="logo">
     <img src="/images/logo_2016.jpg">
   </div>

这是我的CSS

#logo img {
    max-width:800px;
    width: 100%;
 }

这可以完全按照我想要的方式调整图像大小，但图像不会在DIV中居中。如果我尝试将图像居中：

#logo img {
    margin:auto;
    max-width:800px;
    width: 100%;
 }

然后它居中，但不再使用div调整大小。

我怎样才能做到这两点？感谢。

Answer 1

您忘记添加display: block;。

#logo img {
  margin:auto;
  max-width:800px;
  width: 100%;
  display: block; /* new */
}

Answer 2

您可以将display:block;添加到图片元素。您还可以为text-align:center元素设置#logo，这是一种破解。

JSFiddle：https://jsfiddle.net/

Answer 3

尝试将#logo设置为最大宽度，并在图像上放置text-align：center，您可以将其设置为内联块样式。看到这个小提琴：

https://jsfiddle.net/7ewcbr95/

＆＃13;

#logo {
  max-width: 1000px;
  height: auto;
  text-align: center;
  background: #333;
}
#logo img {
    max-width:800px;
    
    display: inline-block;
 }

＆＃13;

<div id="logo">
  <img src="http://placehold.it/350x150">
</div>

＆＃13;

为什么我的图像在以CSS为中心时停止调整大小

3 个答案: