Редактирование и выравнивание 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, когда его идентификатор, это изображение, так должно быть #image IMG

и вы хотите, чтобы указать с атрибутом: возможно максимальная ширина: 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 
}