I need help making my image take up no width on the HTML. What I mean by this is when you shrink the width size of the window, I don't want the image affecting the horizontal slider. I would think overflow:hidden; would work but the right side of the image takes up space on the HTML document.
You could add max-width: 100% to the img element. In doing so, the img will never take up more than 100% of the width of the parent element.
img {
max-width: 100%;
}
Alternatively, you could also use max-width: 100vw (which is 100% of the browser width's width).
img {
max-width: 100vw;
}
Use a width: 50%; instead of px. Play around with which % value best corresponds to your image width. That way the image will automatically adjust to the browser windows size.
Related
somehow my image is not scaling down or up at all. I have seen many things on the internet but I could not solve it. W3schools told me to make it like this, with the formular-banner image.
.formular-banner
{
max-width: 100%;
height: auto;
}
<div class="formular-banner">
<img src="koala.jpeg">
</div>
First of all, you are defining settings for the parent element of the image, not for the image itself. So you can't expect that to have an effect on the image...
For the image itself, you also shouldn't use those settings, but instead of max-width: 100% (to make it the full width of the container), you should use width: 100%, plus a max-width that has the original width of the image in pixels, in order not to make it any bigger (i.e. distorted) than the original image in case it's smaller (i.e. less wide) than the container.
So your CSS rule would be
.formular-banner > img {
width: 100%;
max-width: 1240px; /* use the actual width of your image here */
height: auto;
}
If the image is smaller than the container (which, as a div = block element) will have 100% width by default) and you want it to be centered, you can add this rule (for the container) which will horizontally center the image (as an inline element) inside the container:
.formular-banner {
text-align: center;
}
I have an image element, it can contain any aspect ratio of the image (eg horizontal and vertical). I want to fill the page with it until either its height or width is 100% of the page.
I tried checking the image height and width and setting min-width/height to 100%. This worked very well for vertical images, but with horizontal images, sometimes the 100% height gets reached before the width does, (especially on 4:3 aspect ratio images).
Basically, I just want it to fill either the height or width of the screen, depending on what happens first.
Try with object-fit on image, so it fits it's container and chose the value that suits your needs best.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
The object-fit property will do this if you set it to contain (if you set it to fill it will become distorted if the aspect ratio of the container and the img are not the same).
Here's a simple example, change the viewport dimensions to see the affect on the image:
.container {
width: 50vw;
height: 50vh;
background: gray;
}
.container img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="container">
<img src="https://picsum.photos/id/1015/768/1024"/>
</div>
How can I make an image fit a whole div (resizing the image if necessary)?
yes, You can use
width: auto;
height: 400px;
object-fit: cover;
Instead of cover you can use contain, fill, etc as per your choice.
You cannot always display with the same dimensions
Because your container may be other sizes
But the normal way is to set the height to 100% and hide it overflow
Or vice versa
width: 100%
or use object-fit: hover
same as:
img {
width:100%;
height:100%;
object-fit:cover;
}
If you provide the height OR width of DIV in %, then the div will be expanded as per the size of the image but if you provide the width and height of the div in pixle "px" then the div will have fixed height and width.
Basically, I've got a div with width set to 100%, within which there is an img link. The img's width is set to auto with a height of 600px. The link area stretches over the width of the whole div, in this case the width of the whole page, rather than just the img.
<div class="feature">
<img src="feature.jpg" />
</div>
.feature {
width: 100%;
height: auto;
}
.feature a img {
width: auto;
height: 600px;
display: block;
margin: auto;
}
I don't want to change the div's width to a set value (which does work), because I want to be able to add images later on that may have different aspect ratios. Does anyone have a solution? thanks.
This shows the result if you set the width of the div manually: http://jsfiddle.net/L1xanprh/4/ I also tried just setting the div width to auto as well, it game the same problem as the width being 100%.
For that a, make it's display inline-table
avoid using width:auto.
give the exact position of the image where you want to appear the image.
and use exact width and the height of the original image.
if not your image will get stretched.
If not use the width and height values with accept ratio is equal with the accept ratio of the original image.
Then your image will not get stretched. But if your using a image with lower pixel rate your image will
blurred when your using higher width,height values than the original image.
I'm trying to use a side panel with a width of 20% and a height of 100% so that they will re-size depending on browser width and height etc. I'm having a problem with the height (100%) part of the CSS, it doesn't seem to fit the entire height of the browser window though - it just displays 100% of what's in the side panel.
How can I make the side panel reach the bottom of the page no matter how much content is inside of it?
#sidebar{
float:left;
position: relative;
width: 20%;
height: 100%;
background-color: red;
}
Height 100% is always a pain.
Make sure that, html, body also have height: 100% and any div that's wrapping it.
When you set something with percentages, you must always consider "percent of what?" It's always the parent of the element. So what is the parent set to? If there is no defined height in units for the parent, percentage has no reference.
I had the same problem on a project I was working on, I fixed it thus:
#sidebar{
min-height:100%;
height:auto !important;
height: 100%;
//add other styling needed
}