Image resizing doesn't work properly

  • Hi,

    I didn’t know there was a special theme forum for the Twenty Thirteen so I already posted my question to the general support forum (here). It’s still unresolved so I hope it’s ok to post it again:

    I’m playing with the new theme right now and can’t get my images to resize as I want them to. I use this code to display my new books with covers:

    .neuebuecher
    width: 80px;
    height: 128px;
    background-color: #FFF;
    border: 1px solid #DDD;
    padding: 3px;
    }

    It works on my Twenty Eleven Theme (https://buecherblog.org/2013/07/im-buchkaufrausch-2/) but not with Twenty Thirteen. The six shown covers all have different sizes after using the css style (from left to right): 80×112, 72×106, 72×109, 72×105, 72×107, 72×111.

    Screenshot: https://buecherblog.org/bilder/screenshot.jpg

    alchymyth suggested to change .neuebuecher to .entry-content img.neuebuecher – now all the images have the same size (72px × 120px) but still not the one I defined. Do you know what’s causing this?

Viewing 1 replies (of 1 total)

  • There are few things involved.

    First, the real width and height of images are a little different, forcing them to have the same width and height via CSS only make it look okay as long as the real size is not much different.

    Second, Twentyeleven uses max-width for image of 97.5%, Twentythirteen uses 100% (like most responsive image stylings).

    Third, Twentythirteen forces all elements to have borderbox box-sizing. You can use this code to make your images behave like ones in your Twentyeleven.

    img.neuebuecher {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background-color: #fff;
	width: 80px;
	height: 128px;
	padding: 3px;
	border: 1px solid #ddd;
}

    Please note that <center> has been deprecated and not officially supported in HTML5, you could instead achieve this by using [gallery] shortcode and style the size of images inside it.

Viewing 1 replies (of 1 total)
  • The topic ‘Image resizing doesn't work properly’ is closed to new replies.