HTML 图片调整大小和居中答案

【问题标题】：HTML Picture Re-size and CenteringHTML 图片调整大小和居中
【发布时间】：2015-12-15 01:34:04
【问题描述】：

我已经阅读了许多尝试调整图像大小的帖子，但它不起作用，有人可以帮助我将图像居中并缩小图像吗？

HTML：

<div id="mainBody">
<div id="image">
    <img src="http://s10.postimg.org/6b22cnbfd/jpg">
</div>

CSS：

.mainBody{
    width: 100%;
    margin-right: auto;
    margin-left: auto;}
.image {
    width: 60%;
    position: fixed;
    align-items: center;}
.image img{
    position: fixed;
    display:block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;}
'

【问题讨论】：

可能是因为您在 HTML 中使用了 id 属性，而在 CSS 中为类设置样式？
.mainBody -> '.'表示一个类，但您在 html 中使用它作为 id 而不是类.. 您应该使用 '#' 代替 id。（例如#mainBody）这也适用于其他人。

标签： html image resize

【解决方案1】：

它没有居中，因为它的位置设置为固定。 margin: 0 auto 不适用于固定位置元素。您必须将 left 设置为 50%，然后将负值 margin-left 拉回宽度的一半。例如：

img {
    position:fixed;
    width:300px;
    left:50%;
    margin-left:-150px;
}

http://jsfiddle.net/e24d0bx6/1/

【讨论】：

【解决方案2】：

当它的 id 是图像时，您的 css 指的是 .image img，所以应该是#image img

并且你想指定一个 with 属性：可能是最大宽度：80% 或宽度：400px

【讨论】：

【解决方案3】：

我认为您可以使用位置或边距，但如果您有许多不同尺寸的图像，它可能不起作用。更好的方法，我认为你应该使用背景图像。像这样：

HTML

<div id="image">
</div>

CSS

#image {
    background-image: url(path/to/your/image);
    background-position: center;
    //set size of #image div like you want
}

【讨论】：