I have <img> tag of height = "100%" width = "30%".
when I click on upload file , the selected image is viewed in <img> tag.
But the image gets stretched or squeezed as per resolution.
How to show full image in <img> tag?
Asked
Active
Viewed 202 times
0
Markus W Mahlberg
- 19,711
- 6
- 65
- 89
abcd1234
- 5
- 4
-
possible duplicate of [How do I resize an image while keeping the aspect ratio in CSS?](http://stackoverflow.com/questions/12320761/how-do-i-resize-an-image-while-keeping-the-aspect-ratio-in-css) – Jonathan Jan 02 '15 at 12:27
-
not working. check this fiddle http://jsfiddle.net/omkaoazg/ – abcd1234 Jan 02 '15 at 12:55
-
@GiteshKothavale change height = "100%" width = "100%" – sanoj lawrence Jan 02 '15 at 12:56
-
Just mention only 1 attribute in img or through css. width or height. Rest will be done by the browser perfectly. – Shyam Jan 02 '15 at 12:57
-
its stretching and squeezing the image – abcd1234 Jan 02 '15 at 13:11
1 Answers
0
Set either one or the other, not both (in terms of width or height):
img{
width:50%;
}<img src="https://placekitten.com/g/200/300"/>Notice how an image (usually 200*300) is now stretched to 50% of the width of the screen, and its height will adjust accordingly?
jbutler483
- 24,074
- 9
- 92
- 145
-
now here instead of scroll i want full image to be viewed in that rectangle div (small size as per resolution without affecting actual look of image). – abcd1234 Jan 05 '15 at 12:51
-
-
the size of my div is half the screen . removing css gives scroll to div because of resolution. I want to resize the image to show it inside div. – abcd1234 Jan 05 '15 at 13:12
-
has the containing div got a specific height? if so in your image you can set max-height: /*height of containing div*/ – jbutler483 Jan 05 '15 at 13:19
-
-
if this answered your question, could you possibly mark it as accepted? (by pressing the tick on the left hand side of my answer) – jbutler483 Jan 06 '15 at 08:56