I am trying (if it is at all possible) to use css to make an image 100% the width of a fluid div, but as the images are square (and will be distorted if not square) I want to be able to match the height to the width... for fluid width I am using:
.img{
max-width: 100%;
width: 100%;
min-width: 400px;
}
which works fine for setting the width on all major browsers, but I just cant figure out how to match the height to the width :/
Try throwing in height:auto into your class.
.img{
max-width: 100%;
width: 100%;
min-width: 400px;
height: auto; // <-- add me
}
As mentioned in the comments though, most browsers should be adjusting and scaling the images correctly. But glad this could help.
Now, with CSS3 there is new units that are measured relative to the viewport, (browser window), if you want a fluid image with respect to the window this it works better in most use cases than "%". These are vh and vw, which measure viewport height and width, respectively.
.img{
max-width: 100vw;
width: 100vw;
min-width: 400px;
height: auto;
}
Related
I have to upload images in my app ( i'm using react and styled-components in the fronted ), and, i want the size of the img to be at least 25vh and max 140vh, so this is how i made the code
export const ShowPhoto = styles.div`
width: 614px;
min-height: 25vh;
max-height: 140vh;
margin-top: 3rem;
img{
width: 614px;
height: 100%;
object-fit: cover;
}
`;
As you can see, the img is inside the container.
So, my question is: Is this a good way to do it? i've never used min-height and max-height at the same time, so, am i breaking a css rule or something? or it's ok the way i did it?
Thansk for your time !
Essentially the height of the containing div needs to be dictated by the aspect ratio of the img. So putting the min and max heights on the container rather than the content does not give the desired result in all situations.
Moving min and max height to the img, making the img 100% width of the container and asking for an object-fit gives the result that the image will always have the width of the container, if possible it will show completely but if that is not possible then object-fit cover is invoked with the container taking on the relevant min or max height.
With two images of differing aspect ratios this snippet produced this on my laptop, with the top img shown completely, and the bottom cropped to fit the max height. Of course it depends on the height of the viewport versus that of the img when it has width 614px as to what result is obtained:
* {
margin: 0;
padding: 0;
}
div {
width: 614px;
margin-top: 3rem;
}
img{
width: 100%;
min-height: 25vh;
max-height: 140vh;
object-fit: cover;
}
<div>
<img src="https://picsum.photos/id/1015/200/100"/>
<br><br>
<img src="https://picsum.photos/id/1015/200/600"/>
</div>
I have width: 100% which is very necessary for me. Based on this example code, can someone help me to glue the orange symbol on top of any key and keeping it there even if I resize the browser? like how its happening with the keyboard already.... Thank you so much!
DEMO
HTML
<!DOCTYPE html>
<html lang="en">
<hsrc="https://i.imgur.com/jc1rbcJ.gif">
</div>
</body>
</html>
</body>
</html>
CSS
.container {
position: relative;
width: 100%;
max-width: 100%;
}
.imageOne {
max-width: 100%;
}
.
width: 600px; max-width: 100%;
width: 100%; max-width: 600px;
Parent is 1000px wide
Width says element should be 600px wide. That doesn't break the max-width rule, so 600px it is!
Width says element should be 1000px wide. That breaks max-width rule, so forces element down to 600px.
Parent is 320px wide
Width says element should be 600px wide. That breaks the max-width rule which says element can only be at most 320px wide, so 320px it is!
Width says element should be 320px wide. That doesn't break the max-width rule, so 320px it is!
find more on https://css-tricks.com/tale-width-max-width/
As you pointed out each screen has different sizes. So there are two key factors in your request you need to take care off. The position and the size of your .imageTwo need to be always in %, only then it will have the same position and size of its parent .container. For your suggested letter Y on the keyboard I would do this:
.imageTwo {
position: absolute;
top: 42%;
left: 33.5%;
width: 2%;
height: 5%;
}
For example, when you change the height of the browser while you're here on Stack Overflow, the content on the page doesn't change. However, if you visit my portfolio: http://seanrobenalt.com/ and change the browser height, some elements get scrunched up. Can't seem to figure out what's going on.
What's going on is that you've set the content as follows:
.header-logo {
background-color: rgba(229,229,229,0.4);
box-sizing: border-box;
display: block;
height: 10vh;
padding-top: 10px;
position: relative;
text-align: center;
width: 10vh;
}
Your height and width are set to height: 10vh; respectively width: 10vh;.
And what is vh short for? It's short for viewport-height andvh is a measurement unit, but unlike px it's not absolute.
Something that is 10px in height or width, will ALWAYS be 10px in height or width, no matter how you resize the window, because we're talking the static physical pixels on your screen.
vh, vw, or % on the other hand are relative units of measurement. Take % for instance. If you make a div, that is 100% in width – It will stretch the length of the entire parent element. And if the parent element is 100px wide, then the child element will be 100% of 100px which is.... 100px wide. if you set it to 50% of 100px – It's 50px wide.
So what happens if you set an element to 100vw? It can be simplest described as 100% of the entire browser width – or "Viewport".
So something that is 100vh will be 100% of view-height. (viewport height).
And your image is 10vh, which means, it will always be 10% of how high the browser window is. So if the browser is resized to be exactly 500px high – Your image will be 50px high.
What you need to do is set the size of the image in px for it always keep it's height and width.
I suggest you setup a little playground of a few divs, and start playing around with different measurement types.
Make a few divs that are using width: 100px; height: 200px; width: 100%; height: 100%; width: 100vw; height: 100vh; And place the divs in each other and see what happens.
Hope this helps.
You're calculating the layout of various elements on your page by using the vh (viewport height) unit. 100vh is equivalent to the height of your browser window at any given moment, so resizing the browser is doing exactly what it was coded to do.
Example element I see inspecting your site:
.full-hero {
background-color: #c7dbfc;
background-size: cover;
box-sizing: border-box;
height: 90vh;
padding-top: 10vh;
}
I am trying to make an image resizable.
I have a specific height for this image: height: 100% (inside a container) and a width: auto; (i want the width to be adapted to the height about the natural image size).
Everything works fine when i access the page, but when i resize the window, the height is correctly resized, but the width keeps its initial value, i want it to be proportional (like when i access the page for the first time) to the height.
Is there a way to do it in CSS ? If not, what is the more optimize solution ?
Here is an illustration in code:
HTML
<div class="container">
<img alt="test" src="/img/test.png">
</div>
CSS
.container {
height: 100px;
width: 100%;
}
.container img {
height: 100%;
width: auto; //i need it to be adapted to each height about the natural image's dimensions
}
UPDATE
Here is a jsfiddle
http://jsfiddle.net/CRGj6/1/
Sometime it works sometime it doesn't...
window resize affects only the width of the element but not the height. It is kinda make sense because if you resize the height, more content is scrollable that means don't do anything to width but to increase the scrollbar length (so more content to be scrolled). Assuming that you want to preserve the aspect ratio of the image,
.wrapper .container img {
position: relative;
height: auto;
width: 100%;
}
would be the solution to this problem.
I am rendering an image into a div. I want to avoid stretching of my image.
div {
height: 300px;
width: 300px;
}
img {
min-width: 300px;
min-height: 300px;
max-height: 300px;
}
My problem is that my image's width stretches. I want it to have the regular width even though parts of the image will be missing.
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
height: 300px
max-width: none;
min-width: 300px;
}
You can achieve this with simply adding object-fit: cover;. An example might be like -
img {
height: 300px
width: 100%;
object-fit: cover;
}
I would forget setting the min-height and the max-height. Just set the height to be 300 pixels and put an overflow hidden on the div tag. That way no matter what the image size it will always stay in proportion and never go outside the boundaries of your div tag.
div { height: 300px; width: 300px; overflow: hidden; }
img { height: 300px; }
Put the image as the div background if you want to avoid stretching the easiest way (yet maintain the original width).
To make it more flexible as just using 300px use:
img {
width: 100%;
object-fit: cover;
}
Height is automatically adjusted
just specify max-width 100% and height :auto
Use max-width instead of min-width, and just set height to 300px (or only use max-height).
You can use overflow:hidden to hide any portion of the image outside of the width of the div.
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
/*min-width: 300px;*/
height: 300px;
}
==>If you are gonna have fixed height and don't want width stretched
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
height: 300px
}
==>If you are gonna have fixed width and don't want height stretched
div {
height: 300px;
width: 300px;
overflow: hidden;
}
img {
width: 300px
}
After giving the image a fixed height and width, I added object-fit as below:
img {
width: 300px;
height: 300px;
object-fit: contain;
}
To avoid the image from resizing use:
object-fit: none;
More about object-fit
The CSS object-fit property is used to specify how an or
should be resized to fit its container.
This property tells the content to fill the container in a variety of
ways; such as "preserve that aspect ratio" or "stretch up and take up
as much space as possible".
Object-fit Values
fill: this is default. The image is resized to fill the given
dimension. If necessary, the image will be stretched or squished to
fit.
contain: the image keeps its aspect ratio, but is resized to fit within the given dimension
cover: the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
none: the image is not resized scale-down - the image is scaled down to the smallest version of none or contain.
More info and examples
I'm adding this to expand on the answers given since some of the answers given like adding width:100% height:auto" etc., will still technically stretch Images and/or make them blurry at times. Let me explain.
I work on a lot of eCommerce websites adding products etc and image stretching/blurring is always a problem. Most times, an image scaling down isn't that much of a issue, so the answers given as far as width:100%; height: auto; etc., work just fine. But there are problems when scaling up if the image's container width is larger than the image's native/normal width.
So for example, if you have an image whose width is 100px, and a div container whose width is 200px, if you add a width:100% and height: auto; to your image randomly, this won't technically "stretch" an image, but it will make it look blurry because you are stretching your image past its normal width.
To fix this, one thing i normally do is something like this, assuming on the desktop, that you have an image that you want to show at its 100% native width with no scaling/stretching/blurring whatsoever, I do something like:
img{
display:block;
margin:0px auto;
width: initial;
height: auto;
}
which keeps my images at their native width with no scaling whatsoever. But then, when an image is going to be seen on a smaller device, I add the same rule block into a media query and do something like:
#media all and (max-width: 1200px){
img{
width:100%;
height:auto;
}
}
What this is effectively saying is "Hey Image, make my image responsive from point A to point B(mobile devices), but once you go from point B to point C (small laptops to desktops where the image fits normally and doesn't need to stretch), make the width equal to its default native width".
Hope this helps. Happy coding everyone.