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;
}
Related
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>
I was using "object-fit: contain" to scale an Image when I realised that it doesn't work in Internet Explorer / Edge. So I switched to "max-width: 100%;max-height: 100%;" and I was wondering where the difference is?
Maybe this is a stupid question, but I am a little confused.
max-width and max-height property stop your image to go outside of container If you apply both property max-width:100% and max-height:100% then image will show in without stretching and within the container.
object-fit:contain :-
With object-fit contain you have to define your image height width otherwise it will go outside of container.
Using the object-fit property, you can fit the contents of an image into the dimensions you specify in your style sheet.
The contain value tells the image to shrink or enlarge itself until it fits in the box while maintaining its aspect-ratio.
.first-item {
height: 200px;
width: 200px;
margin-bottom: 10px;
}
.second-item {
height: 200px;
width: 200px;
margin-bottom: 10px;
}
.first-item img {
max-height: 100%;
max-width: 100%;
}
.second-item img {
object-fit: contain;
}
<div class="first-item">
<img src="http://perform-ers.com/images/channel/logo/8f4beb43c0b80dd46228cb87364f4196.jpg" class="grid-img">
</div>
<div class="second-item">
<img src="http://perform-ers.com/images/channel/logo/8f4beb43c0b80dd46228cb87364f4196.jpg" class="grid-img">
</div>
It behaves similarly as background images:
contain should fit the image into the container so that the whole image will be visible and that it keeps its original proportion between width and height. Depending on the proportions of the container this can result in 100% width or 100% height, with the other parameter being set to auto.
width: 100%; height: 100% will in most cases distort the image: It will show the whole image (without cutting off anything), but it will stretch both parameters independently. Think of a 200x200px image that is put into a 400x600 container: The width will be strechted to twice the original, while the height will be stretched to three times the orignal height - this will result in an ugly distortion.
If object-fit: contain is applied to the same example (instead of width: 100%; height: 100%), the new img width will be 400px (= doubled), and the height will also be 400px, since the proportion is kept, resulting in some empty space, but also in a not distorted image.
Its not working because it's not supported by IE / Edge.
http://caniuse.com/#feat=object-fit
As far as layout is concerned:
If the element has a locked aspect ratio, "max-width: 100%;max-height: 100%" will behave like object-fit: scale-down
object-fit: contain guarantees that one of the dimensions of the object will match its container. In some cases, this will look like you had written just "width: 100%" and in others just "height: 100%" depending on the relative aspect ratios of the object and container.
Also...
object-fit is specifically for replaced elements and won't work on most html elements. It does not size an HTML element but an internal object. The image of an <img> will be resized but not the <img> itself
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.
I have a dynamic-height container (its height is specified in relative measurements), inside of it, two elements - a header, and an img, e.g.:
<div class="item">
<header><h1>Title</h1></header>
<img ... />
</div>
I want the image to show in its entirety. Its css is set with height:100% .
Because of the height that the header takes, the image is clipped a little bit below (it is has an hidden overflown edge), where I want its height to auto adjust (become smaller) to fit inside the container.
There is a solution, where I use calc(100%-[height of header]) for the height of the image, but since calc is not supported in all browsers I was wondering if there is a different more supported solution for this.
Here is a jsfiddle:
http://jsfiddle.net/7xLo7mr6/
(Apply the class fix to the container to apply the calc fix)
Perhaps CSS flex could be your solution for this one:
http://jsfiddle.net/7xLo7mr6/9/
Using flex-direction: column; and applying a max-width to the container (allowing the image to fill in the rest of the height after the header text while not stretching the width) could potentially solve your issue, but might cause you more troubles depending on what you're ultimately after.
Another option: http://jsfiddle.net/7xLo7mr6/11/
apply height: 7%; to the header and height: 93%; to the image
Make the clipping happen at the top of the image instead of the bottom:
http://jsfiddle.net/7xLo7mr6/13/
Apply position: absolute; to the header, give it a background: white; and width: 100%;, then apply a position: relative; to the container so that the header applies a width 100% to the container and not the body.
If you just want the image to shrink when its container shrinks, you can give it a max-width of 100%, and that will stop your image from growing so large it exceeds its container.
.item img {
height: 100%;
max-width: 100%;
}
It might be important to note that declaring height: 100% does not make elements 100% of the height of their containers, it makes them 100% of their own intrinsic height. The heights of elements are determined by their content, not the other way around. Read a full explanation here: https://stackoverflow.com/a/5658062/4504641.
http://jsfiddle.net/ingridly/337wrgj8/1/
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.