1

Suppose I have an image sized originally 1280x720(ratio ~ 1.78), but for some reason I added the image as 1000x720(ratio ~ 1.39). The code should look like below

<img src="example.JPG" style="height:720px; width:1000px;">

(Edit : And the code above can't be changed. Actually in the first question I said 'I added', but actually the html source is from WYSIWYG editor. Also, the author(user, as it is WYSIWYG editor) wants to add up the image size 1000x720 or proportional to it(ratio ~ 1.39) even though it can make ugly image)

And, to resize the image proportionally when the screen width is smaller than 1000px, I set the max-width as 100%, and height as auto using css:

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

Then, the 'auto' option for height is ignored, and image isn't resized proportionally. If I override 'auto' option for height using keyword 'important', then the image is resized, but as ratio 1.78(proportional to 1280x720), not 1.39(proportional to 1000x720, and it's what I want to do).

Is there any solution for this using pure css? (AND without calculating ratio by hand, as the given example is only for 1000x720 but I can't expect what size would I get from the user in real service. Maybe they can insert image size as 500x720 even though its real size is 1280x720.)

Rude-Student..
  • 69
  • 7
  • remove the style rules in your `img` tag? `style="height:720px; width:1000px;` – ZombieChowder Oct 23 '16 at 13:00
  • @ZombieChowder I'm sorry, but I'm not sure I fully understand your comment. Do you mean I should the line `` to ``? – Rude-Student.. Oct 23 '16 at 13:05
  • yes and whenever you want an image to be resizable, reference it by percentage not by pixels. – ZombieChowder Oct 23 '16 at 13:07
  • Inline styles will override those specified in a stylesheet—although highly discouraged, using `!important` in your CSS is the only way to forcibly override the style attribute of the image element. – Terry Oct 23 '16 at 13:17
  • @ZombieChowder I'm sorry, but as my mother tongue is not english, I think my question was a bit unclear. I edited the question, so it would be grateful if you could recheck my question. Thanks. – Rude-Student.. Oct 23 '16 at 13:17
  • your CSS for `img` needs to set a `width`, you have a `max-width` but that can be worthless without a "default" width to base it on. `img { height: auto; width: 100%; }` – Martin Oct 23 '16 at 13:19
  • also [read here](http://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio) – Martin Oct 23 '16 at 13:20
  • @Rude-Student.. that is fine, sorry I couldn't help you. – ZombieChowder Oct 23 '16 at 13:24

0 Answers0