Relative width images in html

Make an image width 100% of parent div, but not bigger than its own width

I’m trying to get an image (dynamically placed, with no restrictions on dimensions) to be as wide as its parent div, but only as long as that width isn’t wider than its own width at 100%. I’ve tried this, to no avail:

Many of these images are way wider than their parent div, which is why I’d like them to resize accordingly, but when a small image pops in there and gets scaled up beyond its normal dimensions, it really looks terrible. Is there any way of doing this?

kbrimington does bring a good point to the table. According to reference.sitepoint.com/css/max-width#compatibilitysection IE8’s implementation is buggy.

12 Answers 12

Just specify max-width: 100% alone, that should do it.

Chromium seems to simply leave it at 100% regardless of context. Perhaps I should stop constantly looking at my work on beta software. Thank you!

How do you do this without using max-width: 100%. In React-Native, it’s not possible to use percentages.

Found this post on a Google search, and it solved my issue thanks to @jwal reply, but I made one addition to his solution.

With the above I changed the max-width to the dimensions of the content container that my image is in. In this case it is: container width — padding — boarder = max width

This way my image won’t break out of the containing div, and I can still float the image within the content div.

I’ve tested in IE 9, FireFox 18.0.2 and Chrome 25.0.1364.97, Safari iOS and seems to work.

Additional: I tested this on an image 1024px wide displayed at 678px (the max width), and an image 500px wide displayed at 500px (width of the image).

Источник

CSS: How can I set image size relative to parent height?

I am trying to figure out how to re-size an image so that it keeps it ratio of width to height, but gets re-sized until the height of the image matches the height of the containing div. I have these images that are pretty large and long (screenshots), and I want to put them into a 200px width, 180px height div for display and without re-sizing the images manually. To make this look good, the sides of the image need to overflow and be hidden with the containing div. This is what I have so far: http://jsfiddle.net/f9krj/2/ HTML

a.image_container < background-color: #999; width: 200px; height: 180px; display: inline-block; overflow: hidden; >a.image_container img

As you can see, there is grey color showing on the images parent container which should not be shown at all. In order for that container to be filled completely, the width needs to be overflowed equally on both sides. Is this possible? Is it also possible to account for an image that is also too tall?

7 Answers 7

Original Answer:

If you are ready to opt for CSS3, you can use css3 translate property. Resize based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.

Your need, HTML:

Explanation

DIV is set to the relative position. This means all the child elements will get the starting coordinates (origins) from where this DIV starts.

The image is set as a BLOCK element, min-width/height both set to 100% means to resize the image no matter of its size to be the minimum of 100% of it’s parent. min is the key. If by min-height, the image height exceeded the parent’s height, no problem. It will look for if min-width and try to set the minimum height to be 100% of parents. Both goes vice-versa. This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow:hidden;

Now image , this is set to an absolute position with left:50% and top:50% . Means push the image 50% from the top and left making sure the origin is taken from DIV. Left/Top units are measured from the parent.

Magic moment:

Now, this translate function of CSS3 transform property moves/repositions an element in question. This property deals with the applied element hence the values (x, y) OR (-50%, -50%) means to move the image negative left by 50% of image size and move to the negative top by 50% of image size.

Eg. if Image size was 200px × 150px, transform:translate(-50%, -50%) will calculated to translate(-100px, -75px). % unit helps when we have various size of image.

This is just a tricky way to figure out centroid of the image and the parent DIV and match them.

Apologies for taking too long to explain!

Источник

img width relative to containing div

What is the most efficient way to calculate the width of an image relative to it’s containing div in css? I have the following snippet which sets #image1.width to a percentage that is relative to the width of its parent. I’m using a percentage because I need the image to scale proportionately to the parent when the screen is resized.

It is currently working as intended, except that I have to manually calculate the width percentage for every single image. i.e.

#image1 dimensions == 206x115 #under dimensions == 700x300 new #image1.width % == #image1.width / #under.width == 206/700 == ~29.43% 

What I want to know is if there id a calc() method or similar I can implement to ease/streamline this process? I was going to use width: calc(100% / 700) however this obviously will not work when the screen size changes.

Goals

To re-iterate, it is imperative that the #under image scales with the screen size and the #image remains proportionate. I want the natural image ratios preserved with one another (i.e. an image that is one quarter the size of the other will remain as such at all browser widths). Note: The html can be reconfigured in any way to achieve this. Target browsers: Chrome, Firefox, Edge.

Post Bounty Review

Comment on @Obsidian Age’s answer (end of first bounty 31.03.17): Unfortunately @Obsidian Age’s answer is not correct — it is close but not quite and I just wanted to clarify this here. Below is a snippet from his answer. Note that I think it is a good answer, just clarifying why it has not been accepted:

Setting —width: 90vw what happens if body or div have a max-width set? This is also very hard to calculate for all devices when factoring in viewport-scaling . #image1 < width:calc(var(--width) / 3); >This equates to calc(90vw / 3) which is 30vw which would equate to 30% of the images width. But how do we work out the number to divide by? Well it’s back to where we started. width:calc(var(—width) * calc(206/700*100)); And this is why I have not accepted this answer.

Источник

How can I make all images of different height and width the same via CSS?

I am trying to create an image wall consisting of product photos. Unfortunately, all of them are of different height and width. How can I use css to make all images look the same size? preferably 100 x 100. I was thinking of doing a div that has height and width of 100px and then some how filling it up. NOt sure how to do that. How can I accomplish this?

make the divs fixed height/width, then stuff in the images with an overflow:none , and center the image horizontally/vertically within the div.

14 Answers 14

Updated answer (No IE11 support)

Original answer

@MuhammadAliMansoor it could if you don’t compensate with microtadatas. I updated my answer to achieve the same result with img tags and object-fit, which now has good support.

I’ve been struggling with this equal height issue for months. But now it is cleared. Thanks. I will apply it to all my others apps suffering the same fate.

Simplest way — This will keep the image size as it is and fill the other area with space, this way all the images will take same specified space regardless of the image size without stretching

Wow, it was really that simple. Maybe the other answers are «correct», but this one was the easiest to implement.

The upside of this is that your images are not cropped nor skewed, but the downside is that they still don’t all necessarily appear the same size. Rather than object-fit:scale-down, you can also try object-fit:cover.

can i just throw in that if you distort your images too much, ie take them out of a ratio, they may not look right, — a tiny amount is fine, but one way to do this is put the images inside a ‘container’ and set the container to the 100 x 100, then set your image to overflow none, and set the smallest width to the maximum width of the container, this will crop a bit of your image though,

Products
 

 .crop < height: 300px; width: 400px; overflow: hidden; >.crop img

This way the image will stay the size of its container, but will resize without breaking constraints

Источник