HTML 图片调整大小和居中

Question

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

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;}
'

Answer 1

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

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

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

Answer 2

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

并且您想指定一个 with 属性：也许最大宽度：80% 或宽度：400px

Answer 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
}

HTML 图片调整大小和居中

HTML Picture Re-size and Centering

html

resize

image