Support » Themes and Templates » Prevent automatic resizing of an image

  • I’m pulling my hair out over this one. Everything was going so well… and then this.

    Take a look at http://test.kanabec.net/

    Notice how there are three images within the content area. The third image (one that mentions a virtual tour) is 584×200. But, for some reason, it keeps getting scaled down upon display. The dimensions seem to vary from browser to browser, but I’ve yet to see it appear full-size.

    This site uses the twentyeleven theme. I’ve tried several in-line CSS tricks, but so far no luck. (The image was originally to be 600px wide; I even tried manually scaling it to fit the supposed maximum content width.)

    What should I be doing?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Max

    (@clementsm)

    Thats because there something in the CSS that sets the maximum image width to 97%.

    Checkout line 855 in style.css:

    .entry-content img,
    .comment-content img,
    .widget img {
    max-width: 97.5%;
    }

    Comment out the 97.5% and it will display full width – however – you should rather just delete .entry-content img from the selector in case the theme breaks somewhere else.

    I saw that in the stylesheet, but didn’t change it – my goal is to prevent resizing on just this image, not every image. (It’s a handy feature, just not for this particular page.)

    I’m no CSS expert, but I had hoped that putting style="max-width: none;" inside my <img> tag would do it (one of the ‘attempted CSS tricks’ I referred to). Could have sworn I’d also tried style="max-width: 100%;" but apparently I didn’t. Turns out that was the ticket!

    Glad you pointed out that bit of CSS. If not for that, I might not have given it another go.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Prevent automatic resizing of an image’ is closed to new replies.