Looking for a technique for controlling an tag's aspect ratio. aspect-ratio property isn't supported enough for use at the time of this post.
Generally I would wrap the element in a a container and apply a padding top to create the effect needed. However, the content this I have is inline with other content and I can't touch the html.
The container width that the image is responsive so enforcing height and width directly isn't an option.
For example having an image keep 16:9 ratio within a container. It doesn't matter about the visual scale of the image. I will get the image to adjust with
object-fit: cover
Is there a current technique that would work on just the img tag itself?
It is an aspect ratio problem. Unfortunately CSS on img tag to use the aspect-ratio technique needs a div container. I had a similar problem that I solved using css as soon as:
.img {
display: table-cell;
max-width: ...;
max-height: ...;
width: 100%;
}
Since you can't use the padding tweak, I assume that you can't use javascript either.
If you are only able to work on the img tag, the only solution I'd see that would be close to what you aim to achieve would be :
.yourImage {
width : 100%;
height: 100%;
object-fit: contain;
}
https://caniuse.com/#search=object-fit
You could decide width based on the viweport, as
.theImage {
width: 20vh;
height: auto;
}
or some other variation of it.
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 tag that I managed to align nicely to the rest of the divs in one section. However, as I resize the window, the image starts shrinking or expanding. What could I do in CSS to prevent this from happening?
.img-test {
width: 33.87%;
position: absolute;
max-width: none;
}
.clothes {
background-color: #d04925;
float: right;
height: 805px;
}
The image and the div with the .clothes class are one next to the other and it should stay that way.
You can use the max-width, min-width, max-height, min-height attributes to prevent the image from resizing. Here's a link with more information. w3schools
Hello and welcome to StackOverflow!
You set your image to a percentage value, or in other words to a fraction of the parent container. So if the parent container shrinks, the fraction of it gets smaller and the image shrinks, too! Now there are ways to prevent this, you could set a min-width, which defines a minimum width for your image. So it will shrink to this width, but it won't shrink below.
.img-test {
width: 33.87%;
min-width: 300px;
}
In this example, your image would never be smaller than 300px. You could also omit the min-width Attribute, and set a fixed width directly. But since you mentioned, that you managed to make it „look nicely“, this will propably wreck your whole UI, if the viewport of the browser is too small.
So I would recommend to consider rethinking your layout, if it only works with some specific widths. One way to do this are media queries. You define breakpoints in your CSS, and if the viewport gets smaller (or bigger), different CSS rules apply. You can read more about this here and here.
Just a small off-topic addition: The default value of max-width is none and it is not inherited, so there is no reason to set it to this value.
You need height attribute to be set to some value to prevent image from resizing. Example
.img-test{
height: 200px;
position: absolute;
min-width: 300px;
width: 33.87%;
}
This will help. Unless the image is inside a div whose height is changing.
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 want to make my image fit into a div without using any javascript and without letting the image stretch. I am unable to use the background-image property as I am using css transitions. Using
max-height:100%;
max-width:100%;
Works and is exactly what I want to do except for the scenario when the image is too small. I have considered enlarging the image to a certain height while maintaining the width and then applying max-height and max-width but this seems like a very hacky, time expensive solution if it even works at all. Are there any other suggestions?
Thanks
Kabeer
Display the image as block and it will fit to the parent container
wrap the image in a container and set this style for the image in it:
img {
display: block;
max-width: 100%;
max-height: 100%;
}
so it won't strech
here you have a fiddle
This fiddle is with smaller image than the container
You can try the following way which the image will inherit the height and width of its parent div
<div class="img-frame">
<img src="http://placekitten.com/g/200/300"/>
</div>
CSS
.img-frame{
width: 500px;
height: 500px;
overflow: hidden;
}
a img{
width : 100%;
height: auto;
}
Working Fiddle
Ok, it seems that there is no better solution so I will have to use the hacky solution I eluded to in the original question. For future people this is how I did it. lets say the container is 400px. Apply this css to the image:
height:400px; //set it to whatever the container height is
width:auto;
max-width:100%;
max-height:100%;
With this solution it will scale the image to the size of the container. It will then check the newly scaled image and set the max height to 100% which will stay at 400px. It will then set the max width to 100% which for a portrait image will do nothing if the image is landscape it will then set the width to the width of the container and it works. Also to centre the image after use:
margin:auto;
I apologise for answering my own question but I thought it would be useful for future people