nbar nbar - 5 months ago 7
HTML Question

<image width> vs CSS width

Lets say I have a code like this:



img {
width: auto;
}

<img src="blah.jpg" width="400">





And lets say the
blah.jpg
is
1000px
wide.
The HTML Code comes from 3rd party software, so I can not change it. (But I can select it with CSS).

I want to display the image as wide as it is declared in the img-tag, but I can not delete the CSS
width: auto
.

I can however overwrite this CSS Rule with whatever I want.

EDIT Is it somehow possible to display the the image with a width = width defined in image-tag?

Answer

UPDATE:

The HTML img-Tag is generated with 3rd party software

Is it somehow possible to display the the image with a width = width defined in image-tag?

No it is not possible with CSS.



OLD answer

yes it is using max-width

don't use width HTML tag, neither inline styles

img {
  width: auto;
  max-width: 400px;
}
<img src="//lorempixel.com/1000/200">

Sadly I don't know the width of the image in the CSS file. So I can not set the width or max-width to 400

That's what classes and ID's are for (if you don't know how to use the new CSS 3 Selectors)

so apply for example a class and just set the max-width to that class, something like this:

img {
  width: auto
}
.w400 {
  max-width: 400px
}
<img class="w400" src="//lorempixel.com/1000/200">

<img src="//lorempixel.com/1000/200">