if image width > 400 = image width = 100% css

html image size percent
img width
css image size
img width: 100
html image size scale
img html
html width percent
resize image css

I'd like to check if an image width has more than 400px I'd like this image to get full div width. if image is less than 400px just print it in its normal size.

any ideas how to do this?

<div id="volta">
<img src="/img/volta.jpg">


Apply an id to the image, and with jquery check its width If it is greather than 400px modify his width or add a class that does the same.


  if($("#image").width() > 400){
     $("#image").css("width", "100%");
    $("#image").css("width", "10px");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id = "image" src = "https://pm1.narvii.com/6919/98f453834b5d87a6c92118da9c24fe98e1784f6ar1-637-358v2_hq.jpg"/>

What Is Image Size?, resolution. Usually, these values are given in pixels and the following format: 1024x981. Image size is the dimensions of an image. You can measure image dimensions in any units, but you’ll typically see pixels used for web or digital images and inches used for print images. It’s important to realize that two different images that have the same aspect ratio may not have the same image size, or dimensions.

As far as I know, this does not exist in CSS. What you should do instead is use classes.

Define some CSS class that applies the styles you want:

.long_width {
background: blue;

Then you would use Javascript to check the width of the image. You don't need jQuery to do this you can do it in vanilla Javascript (unless you already have jQuery imported and need it for other things). Maybe something like this:

let elm = document.querySelector('[src="/img/volta.jpg]"');
let width = window.getComputedStyle(elm).getPropertyValue('width');

And then you would use Javascript to add and remove styles accordingly:

if (width > 400) {
else {

The specific answer to your question depends on what your intentions are. But to keep your code simple, you should use Javascript to handle the logic and not depend on CSS selectors for things this complicated. Instead, create a CSS class that contains the styles you need, and then use Javascript to apply it based on the size of the user uploaded image.

Additionally, if the user uploads the image, you should load it into memory and check its attributes in memory rather than by depending on a DOM element. Something like:

let img = new Image();
img.src = "{data URL of img}"

Intrinsic Size, it would be based on its content, if no external factors were applied to it. For example, inline elements are sized intrinsically: width , height , and vertical margin and padding have no impact, though horizontal margin and padding do. Resize the image by percentage, or resize it to be exactly the size you specified, for example: 1366x768 pixels. % x px Keep Aspect Ratio Fill in the background with a solid color if the proportion of image changed:

You will need javascript / jQuery to work. Something like this:

  if($(this).width() > 400){
    $(this).css('width', '100%');

If the width is specified in the HTML like : <img src=".." width=250>. Then you can use this CSS : img[width='250'] { /* style */ }. Fiddle. Online based tool to find width and height of the image quickly, it retuns image size in all size units such as pixel, in and cm.

You can do it like FlokiTheFisherman (with %), or you can use "wv" instead of "%". I recommend using vw.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is  The actual purpose of the width attribute, according to the specification, is to inform the browser of the actual, intrinsic width (in CSS pixels) of the image file. In other words — the width attribute should be used to describe the source file, not how you want it displayed.

img[width='400'] {
    width: 100%;

Images: Complete discussion of WIDTH and HEIGHT for the IMG tag. Includes percentages, stretching/shrinking, and if these attributes are really required (they​  It states that height and width are the rendered height/width of the image and that naturalHeight and naturalWidth are the intrinsic height/width of the image (and are HTML5 only). I used an image of a beautiful butterfly, from a file with height 300 and width 400.

However, adding width and height attributes to your <img> markup Text should not shift if image dimensions are provided so appropriate  Use the crop or resize feature in your software to size the image to the desired width and height, and the ppi resolution. Here an image cropped to a size of 3000 x 2400 pixels is being adjusted from 72 ppi to 300 ppi in preparation for printing at 300 ppi.

If our layout is fluid (i.e. responsive), then our images will need to squish Let's start simply, with a fixed-width image that we want to adapt to  Responsive Images. Responsive images will automatically adjust to fit the size of the screen. Resize the browser window to see the effect: If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:

Use wp_get_attachment_metadata() . Using your example: $img_data = wp_get_attachment_metadata( $attachment_id ); $w = $img_data['width']; $h  The image is redisplayed in its approximate printed size, as specified in the Document Size area of the Image Size dialog box. The size and resolution of your monitor affect the on‑screen print size.

  • This is very easy to do with jQuery. I won't comment further on this, however, since you only tagged this post with CSS.
  • do you know the width of the image before hand? or is it dynamic?
  • Not exactly how you specified but setting max-width: 100% on the img would allow it to resize with the container without stretching larger than its natural size if that is your concern: jsfiddle.net/3rror404/2yrgznkq/3
  • @ibu user can send an image, it may has any size.
  • my problem is that I have many divs with images to check, not only one. <div class="volta"><img src="/img.jpg" class="voltaimg"></div><div class="volta"><img src="/img.jpg2" class="voltaimg"></div><div class="volta"><img src="/img.jpg3" class="voltaimg"></div>... and more can be load dinamically when user scroll down the page.
  • In that case, what if you add a class to the images and then with jquery do a for each that affects every image, $.each(".image", function(i, image){if($(this).width() > 400{do something})}), and when the new images appear just execute that code again
  • But it's attribute selector. Will it work without explicit width attribute?
  • No it will not.