I was reading an article explaining the css properties width and max-width and came across this example:
img {
width: 100%;
max-width:700px;}
This says that the fixed width of the image, should take up the entire size of the parent element — if the width of the parent element is explicitly stated, — all hundred percent of it, yet the image should never exceed 700px. It means that the image can be less than 700px, if that suits its situation better (e.g smaller window size) but it should never be more. So there are two conditions here, that the width of the image can be 100% of the parent element if it wants to but it must not never be more than 700px.
But isn't it unnecessary to add the width:100% here? Doesn't max-width:700px imply that the width will be 100% if the parent is less than 700px anyway?
First, width defines the width of a specific element while max-width define the maximum size the element is allowed to have.
Second, width:100% use the parent's width to calculate the current width value whereas max-width:100% use its own original width to calculate the maximum size. So, the image with width: 100% could be larger its original size (scaled base on its parent width). On the other hand, the image with max-width: 100% could be smaller but never be scaled larger its original size (maximum valid width = 100% x original width). That's why it's called fluid image.
Let's say you put width: 700px for an image. When you re-size your screen the image stays stably 700px. Let's say you on a mobile phone and its screen width is less then 700px the image will not fit in the screen. So it will stretch out your page and make it not mobile-friendly. At the same time, when you set max-width:700px it will re-size up to 700px but when the screen goes smaller and the images don't fit in the screen it will automatically re-size it to fit the screen.
As far I understand you want to get the image fit to the size of its parent container with the constraint of not exceeding the width of the image more than 700px.
Then I will say yes it is unnecessary to give "width: 100%;" either way default value for width will get selected i.e. "auto".
Because of this whenever your parent container will be smaller than 700px, your image will fit your container (since "width: auto;").
P.S.-Please refer "object-fit: contain" property of CSS, as that will also help.
Related
When I resize an image to using just "width: 15%" both the width and height of the image change so it's just displayed smaller. But how does this change the original dimensions in pixels. What would be the new height and width in pixels?
To answer your question, it depends on the dimensions of the containing block. If your elements aren't inside anything else like a div, then this depend on your viewport
If your browser is 1000 px wide and you show something as width: 15% that isn't inside any other element, it will show as 150 pixels.
That said, the original dimensions of your image will not change. The only thing that will change is how it is displayed.
Live demo: http://leoaivy.github.io/projects/poster_inside/html/1_P.01_login.html
Questoin: ".login-bg-wrap a img" work well on desktop with max-width set to 100%. But on narrower devices like iphone 6, the background images just scale to fit the width of view port, which make their height become smaller. I set heihgt to just 1% or 100% but they scale to their original size. I don't know why? And is there a way to make the height of these images fit the height of the site?
You need to make sure that every element, down to the images, is set to have a width of 100%. And an extra min-width of whatever number you want to stop the shrinking at applied to the image itself.
And only the width, not the height.
You could remove the max-width, make the image's height and width 100%, and give it a object-fit: cover; Is that what you are trying to achieve?
You can also use 100vw on the width, and 100vh on the height, so that way the image will always have the viewport's size.
I have written a fairly basic javascript function that when an image is clicked on a full sized version appears in the foreground.
The image is set with max-width and max-height numbers in a CSS file such that it leaves some space around the outside and it preserves it's own proportions.
The problem is that if the image happens to not be large, or the screen of the users device has a very high pixel density then the 'larger' image might not be any larger.
Is there a way I can keep proportions, not exceed say 90% on either side, but set the largest dimension to be 90%.
The closest similar method I have found is the fill option for backgrounds.
Cheers
Set the width and height of the image to a relative value like 100% - (margin + border + padding) so that it will be stretched regardless of its actual dimensions.
Using max-width and max-height is a nice way to restrain your image from growing beyond specific proporitions, but leaves room for the image to decide what size it wants to be within those bounds. You say you do not want this, thus set width and height as well.
You can embed that image in div tag and apply css property width:100% to image and on click of image increase the width of div proportionately as per the resolution. In this scenario image with less width than parent div gets adjusted as per width of parent div.
I'd like to make an image always be at least 600px height, but still maintaining at least 100% width (while keeping aspect ratio). Over flow on either side is fine. I just want the image to always fill the full width of the screen and always reach at least 600px in height.
It's hard (maybe impossible) to achieve what you want. You will have to choose two of the three options (aspect ratio, width, height).
One way to do it would be this, but it can break aspect ratio:
img {
min-height: 600px;
width: 100%
}
I have an image within a wrapper div. I need to restrict the height of the image to no greater than 150px. The width of the image cannot exceed the width of the parent div (the wrapper). If either the width or the height reaches its limit, the other dimension should not increase anymore so as to preserve the original proportions of the image.
I am manipulating the CSS for the image with id #frameImage and the CSS of the wrapper div with id #imageWrapper:
#imageWrapper
{
height: 150px;
width: 100%;
}
#frameImage
{
max-width: 100%;
max-height: 150px;
}
Visually, this seems to work for images that have at least one dimension that exceeds one of these limits. However, I have some images whose true heights are less than 150px and whose true widths are less than the wrapper div. In this case I want to blow up the image to dimensions beyond it's natural ones until its height hits 150px or its width hits the width of the wrapper.
In its current state, these small images as I have described in the paragraph above keep their original size and tuck themselves into the upper left corner of the parent div without expanding to meet one of these limits.
I have been messing around for a few hours with auto and 100% heights and widths without ever getting the result I want.
Is there a simple way to achieve this that I am missing? Thanks!
remove the max preffix, from both declarations in the #frameImage, that forces the image to those values