Is there an issue with images set at max-width: 100% displaying larger than their actual size when published?

Question

Is there an issue with images set at max-width: 100% displaying larger than their actual size when published?

I'm at my wits' end trying to figure this out. Here's the CSS code causing me trouble:

img {max-width:100%; height:auto; }

Whenever I upload an image to a blog post that is sized 200x200, like this:

<img width="200" title="photo-Trent-Dysmid.jpg" style="width: 200px; float: right;" alt="photo-Trent-Dysmid.jpg" src="http://inboundmarketing.digitalhive.buzz/hubfs/jan-2016-images/photo-Trent-Dysmid.jpg" data-constrained="true">

Upon previewing the blog post, it displays the image at 798x798, stretching it to fit the full width of the page. The only solution I've found is manually changing "width: 200px" to "max-width: 200px" each time. It's becoming quite a hassle! What am I missing here?

Appreciate any help! Rebekah

html css

Answer 1

Answer №1

max-width: 100%

The percentage value in the CSS rule applies to the width of the container that holds the image, not the actual image itself!

For instance:

<div style="width: 500px"><img src="..." style="max-width: 100%" /></div>

In this example, if the container has a width of 500px, the image element will have a max-width of 500px too

If you want to set a custom max-width for the image based on its size, you can use JavaScript and the image.onload event like this:

<img onload="this.style.maxWidth = this.width + 'px'" src="..." />

Answer 2

max-width: 100%

The percentage value in the CSS rule applies to the width of the container that holds the image, not the actual image itself!

For instance:

<div style="width: 500px"><img src="..." style="max-width: 100%" /></div>

In this example, if the container has a width of 500px, the image element will have a max-width of 500px too

If you want to set a custom max-width for the image based on its size, you can use JavaScript and the image.onload event like this:

<img onload="this.style.maxWidth = this.width + 'px'" src="..." />

Is there an issue with images set at max-width: 100% displaying larger than their actual size when published?

Answer №1

Similar questions

Activate simultaneous HTML5 videos on iOS devices with a simple click

Profile picture placeholder with conditional logic

Center the image within a Grid item using Material UI's alignment feature

Place the div at the bottom of the page or viewport if it is bigger

Guide on Cordova: Playing MP4 videos in fullscreen and endless loop

Is it possible for HTML to provide alternative text for unique characters, such as accented characters?

How can I add opening quotation marks to every line of text using HTML and CSS?

Guide on extracting the string "152" from a textnode using Selenium

What is a method to shift an element to the side without actually deleting it from the DOM (perhaps using a simulated slide

Misaligned Div Content

Is there a way to submit a form without displaying the values in the URL?

Styling the sub-elements using CSS in JavaScript

Guide to creating a Bootstrap Select Dropdown that functions as a Tab List by utilizing option elements with role=tab

Conflict between Angular's ng-repeat directive and Sass styling

Can JQuery be used to specifically target attributes with vendor prefixes?

Modifying the alignment of Angular elements within the router-module to complement an established CSS grid

Navigate through the page and once you reach a specific point, scroll the element

Aligning text in the middle of an image both vertically and horizontally

Stopping setTimeout when leaving the current page: Is it possible?

SassError: Variable not defined