I have created a div having a particular height and width. Inside that I have inserted images. The problem is if the images are of same dimensions, then divs are similar. But if the images are of different dimensions, then the divs also change.
For example, have a look on the page below:
http://versatilemobitech.com/portfolio/
The dimesion of all images are of 180*200 pixels, that's why all the divs are looking similar (square sizes boxes having white background).
My question is can't we make a div having a particular dimension and then insert images of different aspect ratios without changing the dimensions of the div as it could save time from resizing the images to same dimensions all the time.
Try like this:
.image{
max-width:180px;
max-height:200px;
}
this will adjust your image with aspect ratio
add style to your image styles
max-width: 100%;
max-height: 100%;
width: 100%;
height: auto;
OR
max-width: 100%;
max-height: 100%;
width: auto;
height: 100%;
it should work
edit : Your parent div must have the property position: relative;
Related
To have responsive images that scale down proportionally on a small screen, I currently use max-width: 100%; (or a fixed max width). As opposed to specifying a fixed size, this has a terrible downsize in that when the page is loading, the browser allocates no space for the image and can only do that after it starts downloading it. This causes a lot of layout reflows and a bad experience before all images are loaded.
This seems like it could be easily fixed - after all, I just have to tell the browser what the real size is so that it can figure out the aspect ratio and the final size before downloading it. First, I was wondering if that's what the width and height html attributes are for, but I know that that's not their purpose as they can be used to rescale the image and change the final size.
What I really want is something like "srcwidth" and "srcheight" that would tell the browser the actual size of the image file so that it doesn't have to load before knowing the aspect ratio to make use of the max-width styling. But from what I could find, there is no such thing like these attributes. Is there really no way to achieve this?
I tried using the actual width and height html attributes in this way and then overriding it with CSS, but browsers simply don't care about that.
The most common way I've seen this addressed is to put all your images in containers and use the padding-bottom property to "pre-allocate" the height.
<div class="responsive-container">
<img src="image.jpg"/>
</div>
To do this, you need to know the aspect ratio of the image to calculate the padding.
Using the Aspect Ratio to work out the height
For example, for an aspect ratio of 16:9 (e.g. 800 x 450px) the height is 56.25% of the width so that will be the value for the padding.
.responsive-container {
width: 100%;
padding-bottom: 56.25%; /* 9/16 = aspect ratio of image */
position: relative;
height: 0;
overflow: hidden;
}
.responsive-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
Different Aspect Ratios
If your images will have different aspect ratios, but you will still know then ahead of time, you set up different classes for each, e.g.
.responsive-container {
width: 100%;
position: relative;
height: 0;
overflow: hidden;
}
.ratio-16-9{
padding-bottom:56.25%; /* 9/16*100 */
}
.ratio-4-3{
padding-bottom:75%; /* 3/4*100 */
}
.ratio-1-1{
padding-bottom:100%;
}
And to use it in the html:
<div class="responsive-container ratio-16-9">
<img src="image.jpg"/>
</div>
Calculate height dynamically
Finally, if you want the CSS to calculate the height dynamically for each image, you can use CSS calc() to calculate the height like this:
calc((image_height/image_width)*100%)
So your CSS would be:
.responsive-container {
width: 100%;
position: relative;
height: 0;
overflow: hidden;
}
And you use it like this:
<div class="responsive-container" style="padding-bottom: calc((426/640)*100%);" >
<img src="image.jpg"/>
</div>
References
Responsive images – how to prevent reflow
Responsive Images Without Browser Reflow
MDN Web Docs for CSS calc()
I am using plain old css no bootstrap or anything. I want to make an img element responsive,thus shrinking and expanding while maintaining its proportions up to a maximum height. I have looked over several SO responses but have not found something that matches my use case. How would I achieve this. I have it kind of working with the following code.
<div class="imageContainer">
<img src="{{employee._image}}">
</div>
img
:max-width 100%
:height auto
.imageContainer
max-height: 300px
This solution works as the image gets smaller and it works when the image gets bigger up to the maximum height of the div at which point the image image overflows. I want it to stay within that div while maintaining its proportions. I have tried various combinations using max-height on the img and the div, but have not gotten it to work. Thanks for any help that can be provided!
The images have to be set dynamically, so hardcoding the url in css with background image is not an option.
Try setting the css top and bottom properties to 0px.
img
:max-width 100%
:height auto
:top 0px
:bottom 0px
To have an image set to a max-height of a div, the height property of the imager must be inherited from its parent.
The answer and theory around it can be found here: Child with max-height: 100% overflows parent
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}
I believe I was able to achieve your goal like this:
img {
max-width: 100%;
max-height: inherit;
}
I want to set image in img tag, without cropping it or stretching it.
That is, the image ratio I have set is 1:1 but image may vary in aspect ratio, so I neither want to change the aspect ratio nor want to crop it vertically or horizontally. my images are changing dynamically.
I have checked multiple solutions for eg: This one which suggests either crop height or width. But I don't want both.
Currently I am at this:
HTML:
<div id="container">
<img id="imgHolder" />
</div>
and CSS
#container{
height: 100px;
width: 100px;
background-color: yellow;
overflow: hidden;
}
#imgHolder{
height: 100%;
/* OR width: 100%; */
}
Help. I prefer CSS only.
you can just set both the max-width and the max-height of your images
#container img {
max-width: 100%;
max-height: 100%;
}
Doing so the image won't be stretched since your not changing its width or height: whatever is the image size, setting the above properties together ensures that the longest side is reduced to the maximum width (or height) of its parent div, while the other one can freely adapt itself, keeping the original image ratio.
Example http://codepen.io/anon/pen/qEjLZa
Example with centered images (both ver. and hor.): http://codepen.io/anon/pen/NPgege
If you set a height and width on the parent container, it is hard to retain a perfect aspect ratio without stretching or cropping the image. If the image is the same size, 100px x 100px then you could use
CSS
#container{ position: relative; width: 100px; height: 100px; }
img{
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
}
This will set the image to cover the parent container. You could also try
img {
background: url( yourimage.png) cetner no-repeat;
background-size: contain;
}
This will set the image to fill the larger of the dimensions to the parent container and will center it. The smaller dimension will not be covered, but it will retain is apsect ratio.
I have a website on which the products have just one pic associated with them. The dimension of pictures are generally +200 X 200+. At one place, i want to show the image in 100X100 and at other in 75X75.
Is it possible to show the images properly in same proportion or not. Right now, the images look fatty or long or thin at some places.
If you set ONLY the height OR width of an image, the other dimension gets resized proportionally.
So, if your image container is let's say 100X100 px, you can style the image like this:
div.imageContainer100X100px img {
max-width: 100px;
max-height: 100px;
}
Or for 75X75 px:
div.imageContainer75X75px img {
max-width: 75px;
max-height: 75px;
}
I assume that you have used IMG tag to display the same image at different places in different sizes. To display image in correct proportion, set one of the dimensions i.e; width or height the other will be adjusted automatically: Example:
<img src="mypic.png" width="75px" />
In the above code the image tag will automatically adjust the height for correct proportion.
hope this helps
In my experience you have to set the image width to 100% of the parent to get consistent results with image resizing. Just setting the max-width doesn't guaranty that the image will fill the parent. This will.
.container {
overflow:hidden;
}
.container img {
width: 100%;
height: auto;
}
.container100 {
width: 100px;
height: 100px;
}
.container75 {
width: 75px;
height: 75px;
}
<div class="container container100">
<img src="path-to-img" alt="appropriate alt text">
</div>
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:
img {
width: 100%;
height: auto;
max-width: 100%;
}
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?
Just specify max-width: 100% alone, that should do it.
Found this post on a Google search, and it solved my issue thanks to #jwal reply, but I made one addition to his solution.
img.content.x700 {
width: auto !important; /*override the width below*/
width: 100%;
max-width: 678px;
float: left;
clear: both;
}
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).
Setting a width of 100% is the full width of the div it's in, not the original full-sized image. There is no way to do that without JavaScript or some other scripting language that can measure the image. If you can have a fixed width or fixed height of the div (like 200px wide) then it shouldn't be too hard to give the image a range to fill. But if you put a 20x20 pixel image in a 200x300 pixel box it will still be distorted.
In line style - this works for me every time
<div class="imgWrapper">
<img src="/theImg.jpg" style="max-width: 100%">
</div>
You should set the max width and if you want you can also set some padding on one of the sides. In my case the max-width: 100% was good but the image was right next to the end of the screen.
max-width: 100%;
padding-right: 30px;
/*add more paddings if needed*/
I was also having the same problem, but I set the height value in my CSS to auto and that fixed my problem. Also, don't forget to do the display property.
#image {
height: auto;
width: auto;
max-height: 550px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
display: block;
}
I found an answer which worked for me and can be found in the following link:
Full Width Containers in Limited Width Parents
I found max-width:inherit; worked for me
I wrote this code:
div.image {
height: auto;
width: 100%;
}
div.image img {
height: inherit;
width: inherit;
}
max-width: fit-content; worked for me.
If the image is smaller than parent...
.img_100 {
width: 100%;
}
I would use the property display: table-cell
Here is the link