[Turtle91]

Originally Posted by knightrider247

Hi there,

somehow I am incapable to get the pictures centered. Here is my CSS-code. Isn't display block the correct code?

.landscape img {
width: 100%;
display: block;
}


Another thing: Why couldnt I say: width: 100 % for both landscape and portrait pictures? I know you guys said that it would result in a result I didnt want, but with the tools I have I cant get it to display it the "wrong" way (cut off or whatever). I tested with kindl previewer, phone, paperwhite.

Thank you for your help!
knightrider

display:block does not automatically center the image, it simply means to treat the tagged section as a "block element"...typically it will result in putting it on a new line. If you have your image embedded inside of a block level element (such as a <div>) then display:block is unnecessary.

Also, with a width=100%, the image is already taking up the full width of the parent element, so centering is moot; you would need to provide CSS for the parent element instead.

You need to give it some CSS such as:

.landscape {margin: 1em 0}

.landscape img {margin:0 auto; width: 75%}

<div class="landscape"><img alt="" src="sample.jpg" /></div>

or:

.landscape {margin: 1em auto; width: 75%}

.landscape img {width:100%}

<div class="landscape"><img alt="" src="sample.jpg" /></div>

Attached is a graphic that illustrates some of the different issues that arise with images. The graphic/images assume you preserve the aspect ratio (otherwise they get stretched or squashed) and that you somehow center the image vertically (which is not covered in this question/answer).