Prevent automatic resizing of an image (3 posts)

  1. kthelen
    Posted 3 years ago #

    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 584x200. 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?

  2. Max
    Posted 3 years ago #

    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.

  3. kthelen
    Posted 3 years ago #

    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.


Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.