Geek Answers Handbook

Forced image to maintain its own height when changing width

https://jsfiddle.net/q97jn9jp/

I have an image, but I do not know its width or height . I want it to be 100% wide, but I want the height to remain natural (if the image height was 100px , I want it to always remain 100px ).

Is it possible?

I do not want to use javascript.

 img { width: 100%; //height: ???; } 
 <img src="https://placehold.it/100x100" alt="">
+6
source share
6 answers

I understand that the goal here is not to use an image style. If this restriction applies only to measurements, this may work:

 .stretchy { background-image: url(https://placehold.it/100x100); background-size: 100% 100%; } .stretchy img { display: block; /* eliminates descender space inherent with inline elements */ visibility: hidden; } 
 <div class="stretchy"> <img src="https://placehold.it/100x100" alt=""> </div>

Fiddle

+5
source

It is not possible to maintain height by setting the width to 100% without javascript.

+1
source

EDIT

Impossible with pure CSS and a traditional image

CSS provides no mechanism for declaring the natural height or width of an image as a value.

It is not possible to accomplish what you are asking without using JavaScript or changing the layout and using the background image as suggested by @isherwood .

Closest you can come to what you ask is to know the height of the image in advance.

 img { width: 100%; height: 100px; } 
 <img src="https://placehold.it/900x100" /><br /> <img src="https://placehold.it/450x100" /><br /> <img src="https://placehold.it/100x100" />

But you can use JavaScript (even if you don't want it) to dynamically set the page load height. JQuery example:

 $(function () { $('img').each(function () { var $this = $(this), height = $this.height(); $this.css({ width : "100%", height: height }); }); }); 
 /* Ensure images load in natural sizes initially */ img { width: auto; height: auto; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="https://placehold.it/900x100" /><br /> <img src="https://placehold.it/450x100" /><br /> <img src="https://placehold.it/100x100" />
0
source

If you want to keep the aspect ratio of the image, you should use:

 height: auto;
-1
source

You want the sensitive image class to automatically resize your image to the width of the viewport and dynamically change its height.

 .image-responsive { display: block; height: auto; max-width: 100%; }

The key is to make the image an element of the block level with an automatically determined height, limiting the width to 100% of the available column.

-2
source

Edit: Sorry, I misunderstood that you did not know the height as soon as I started looking at the violin. I went from this image.

Ok, first explain how% works.

When determining the% size, it will essentially “fill” the container. You can see how this works in the script that you provided by dragging the middle separator into different sizes.

In this script: https://jsfiddle.net/q97jn9jp/3/

 img { width: 100%; height: 100px; }

You can see that the height of the image remains 100px, or it is a natural height, as you explained. While the width is stretched to fill the width of the containers.

Similarly, if you did not specify a height, it will scale to the width that you experience in your violin.

Hope this helps.

-2
source

More articles:


All Articles