I want the image to fill the height of its container and then use object-fit: cover to take care of the aspect ratio. In Chrome this achieves the desired effect. However, in Safari the containing divs are now very tall.
http://codepen.io/anon/pen/GjzPvN
Why is there a discrepancy between Chrome and Safari? Which one is correct and if Safari is correct, is there a better way to achieve this, preferably without using position: absolute?
Safari does it correctly, because of the wrong support for min-height by Chrome.
If you need consistency, you must use vh, this way:
img {
width: 100%;
min-height: 100vh;
object-fit: cover;
}
I wouldn't use object-fit: to do what you need because of its browser support
For the best browser support, you could use instead of an image, a background-image like this:
.row
.medium-8.columns
a.link#image-1 href="" # I use and id to manage the background image but you could use a class or even inline style (not suggested)
.medium-4.columns
a.link#image-2 href=""
And your css:
/* I fix the container height to fit the 100% of the page */
html, body, .row, .row > div {
height: 100%;
}
/* If you want a fixed height you could add it here and remove the style above. */
[id^="image-"] {
background-size: cover; /* This could be "cover" or "100% 100%"
The difference is that the second distor the image to make it fit.*/
background-position: center;
}
#image-2 { background-image: url(http://placehold.it/300x150); }
#image-1 { background-image: url(http://placehold.it/400x300); }
Here is my CodePen example.
Please notice that If you want to get exactlye the same result as your CodePen, you should change background-size to 100% 100% but if you want the image to maintain it's aspect ratio you should consider using cover or contain. Read more about the differences between cover and contain here
It seems Chrome calculates the row height according to the highest image. Safari does not calculate the row height according to the images.
Even if you set a fixed column height, the behavior of Safari 9.x and Chrome is not the same. The left img is showing outside its container in Safari. To make the browser behave the same, I had to set a height and make overflow-y hidden.
Example:
.columns {
padding-left: .9375rem;
padding-right: .9375rem;
min-width: initial;
background: blue;
height: 405 px;
overflow-y: hidden;
}
Instead of overflow hidden. You can try:
.columns {
padding-left: .9375rem;
padding-right: .9375rem;
min-width: initial;
background: blue;
height: 405px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
Maybe you can set the height of the columns according to the highest of the two images using some jQuery. Or set the height using #media rules.
Microsoft browsers does not support object-fit: - Including IE11 and EDGE. For browsers not supporting object-fit:, you can try object-fit-polyfill
If anyone is having this issue with a variable height wrapper and Safari this seemed to work for me:
.imgContainer {
width: 50%;
max-height: 100%; // for safari
}
.imgContainer > img {
object-fit: cover;
min-height: 100%; // for safari
}
Related
Before I posting this question I have checked this forum and google but the methods is not working for me. May be I am doing wrong.
I have a page which is look like this :
enter image description here
In this page I have few images and for that I am using following css code:
display: inline-block;
width: 100% \9;
max-width: 100%;
min-height: 75px;
height: auto !important;
height: 75px;
Now in Firefox browser both top and bottom images are showing correct size but in internet explorer all images are showing full height ( filled up entire website)!!
Now If I remove this line
height: auto !important;
then on internet explorer image height is perfect but on Firefox bottom images are stretch.
How can I solved this problem ?
Thanks.
please try this.
{
display: inline-block;
max-height: 75px;
min-height: 75px;
width: auto;
}
About your all image height will be 75px but width may be not same for all and if you want image also same then please use below.
{
display: inline-block;
max-height: 75px;
min-height: 75px;
width: 100%;
}
If all images have same width then there will no issue but if width are not same for all images then may be some images will be stretch.
I was creating the about section of my site and was placing an image besides some text and now when i shrink the screen size the image for some reason is not taking up the full height of the containing <div>.. please check the fiddle and help me understand the reason for this.
The borders will show you the gap at the bottom which I don't want to show..
Please note that I do have bootstrap wired in as well for the project but I am not using it for this section.
Thanking all of you in anticipation
You've got min-width and max-width set on the images's parent, as follows:
.about-content {
box-sizing: border-box;
min-width: 200px;
max-width: calc(50% - 2em);
}
Remove the min / max width properties and it works (note, I've added a media query in the CSS as per below): https://jsfiddle.net/m9j61oua/7/
Although pretty pointless as I don't know any devices that go that small, you could wrap it in a media query :
#media (min-width: 201px) {
.about-content {
min-width: 200px;
max-width: calc(50% - 2em);
}
}
EDIT - Further to comments below, I think the only way forward for you is to use a background-image on the second div, here's a fiddle: https://jsfiddle.net/m9j61oua/14/
Relevant CSS:
.about-content.bg-image {
background-image: url(http://assets.worldwildlife.org/photos/1620/images/carousel_small/bengal-tiger-why-matter_7341043.jpg?1345548942);
background-size: cover;
min-height: 200px;
}
I've appended the class bg-image to your second div and removed the image element within it.
As you can see, it's not a perfect solution to what you're looking for, but with the right image and some media queries, you should be able to crack it.
The image isn't any higher. If you give it height: auto, it keeps its proportions, which usually is desired.
If you would set it to height:100%, it would be distorted, or (if you then set width to "auto") cut off a the sides.
One possibility would be to define the image as background image for its container and use background-size: cover; background-position: center; Background-repeat: no-repeat; on it. But this will cut off some parts of the image.
If you use background-size: contain;instead, you get the full image again, but with some space on either the sides or top and bottom.
img tag is inline-block by default, so you need something like this:
.about-content img {
display: block; /* remove extra space below image */
max-width: 100%;
height: 100%;
}
You have defined such style
.about-content img {
max-width: 100%;
height: auto;
}
which force browser to keep image aspect ratio.
Use image with correct aspect ratio or change style of img element.
There is a little change on line #14 in css. change max-width: 100%; to max-width: auto; height:auto to height:100% &
And Here is your code Make changes in your css and it will work. :
.about-content-wrapper {
margin: 2em 0 5em;
display: flex;
flex-wrap: wrap;
padding: 0 1em;
border:1px solid #ccc;
}
.about-content {
box-sizing: border-box;
min-width: 200px;
max-width: calc(50% - 2em);
}
.about-content img {
max-width: none;
height: 100%;
}
.about-content h2,
.about-content p {
margin: 0 1em 0 1em;
}
I would like my image to be not stretched and no scroll bars. So when the browser window is reduced the image is still the same size (but overflow is hidden).
<img src="http://nybbledesigns.com/images/header.jpg"/>
JsFiddle: http://jsfiddle.net/6ppL9axc/
I found solutions with containers but I need a solution without.
Any idea?
Give this a try:
img {
position: fixed;
overflow: auto;
}
<img src="http://nybbledesigns.com/images/header.jpg"/>
I made a background version, hope it could help.
<div></div>
div {
width:100%;height:60vh;
background-image:url("http://nybbledesigns.com/images/header.jpg");
background-repeat:no-repeat;
}
The vh is relative to the device screen height so 60vh will be 60% relative to the screen height
at all time, no matter which device :)
Try
html, body {
max-width: 100%;
overflow-x: hidden;
}
It will disable the scroll bars forever~
try this
img {max-width:100%;}
This can be done with the new CSS property object-fit (Currently webkit only, but soon to be supported in other browsers)
Just set object-fit: cover; on the img together width a max-width and fixed height.
This is basically the equivalent to to applying background-size:cover to a background image , except that here we apply it to an img element.
FIDDLE
body {
margin: 0;
}
img {
object-fit: cover;
max-width: 100%;
height: 513px;
}
<img src="http://nybbledesigns.com/images/header.jpg" />
I've created a responsive site and the images are set to:
max-width: 100%;
height: auto;
This is great and resizes the images for different screen devices and scaling of the window. However my images are varies sizes abut 5-30px differences. Is there a way to have them all the same height and width but also to auto scale.
I've tried adding height="170" and width="190" but this doesnt seem to work.
How can i have them set to the same size without manually resizing all images.
Example is here;
http://www.cartoonquiz-answers.com/Solutions/Level8
As you can see above the image for answer "King Julien" is slightly larger, as a result makes the next row with one image, instead of filling each row with 4 images.
thanks
If you want to force all images to the same size, just set a general CSS rule:
img
{
width: 190px;
height: 170px;
}
If you want them to scale, use percentages instead:
img
{
width: 100%;
}
This will force all images to fill their containers (and will maintain their aspect ratios).
You could force an aspect ratio:
.reviewname:before {
display: block;
content: "";
padding-top: 80%; /* aspect ratio */
}
.reviewname {
position: relative;
}
.reviewname > img {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
left: 0px;
}
I think you have two options:
Use CSS background images (see below) or...
Crop/Resize the images to all the same height and width.
Here's a handy way to use background images: (not supported in all browsers)
<img style="background-image: url('/path_to_your_images/yourimage.png');" class="bgimg">
.bgimg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
This question already has answers here:
How do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 4 years ago.
Is there a way to resize (scale down) images proportionally using ONLY CSS?
I'm doing the JavaScript way, but just trying to see if this is possible with CSS.
To resize the image proportionally using CSS:
img.resize {
width:540px; /* you can use % */
height: auto;
}
Control size and maintain proportion :
#your-img {
height: auto;
width: auto;
max-width: 300px;
max-height: 300px;
}
If it's a background image, use background-size:contain.
Example css:
#your-div {
background: url('image.jpg') no-repeat;
background-size:contain;
}
Try
transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
You can use object-fit property:
.my-image {
width: 100px;
height: 100px;
object-fit: contain;
}
This will fit image, without changing the proportionally.
Notice that width:50% will resize it to 50% of the available space for the image, while max-width:50% will resize the image to 50% of its natural size. This is very important to take into account when using this rules for mobile web design, so for mobile web design max-width should always be used.
UPDATE: This was probably an old Firefox bug, that seems to have been fixed by now.
To scale an image by keeping its aspect ratio
Try this,
img {
max-width:100%;
height:auto;
}
Revisited in 2015:
<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">
I've revisited it as all common browsers now have working auto suggested by Cherif above, so that works even better as you don't need to know if image is wider than taller.
older version:
If you are limited by box of 120x100 for example you can do
<img src="http://image.url" height="100" style="max-width: 120px">
<img style="width: 50%;" src="..." />
worked just fine for me ... Or am I missing something?
Edit: But see Shawn's caveat about accidentally upsizing.
The css properties max-width and max-height work great, but aren't supported by IE6 and I believe IE7. You would want to use this over height / width so you don't accidentally scale an image up. You would just want to limit the maximum height/width proportionately.
img{
max-width:100%;
object-fit: scale-down;
}
works for me. It scales down larger images to fit in the box, but leaves smaller images their original size.
I believe this is the easiest way to do it, also possible using through the inline style attribute within the <img> tag.
.scaled
{
transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}
<img src="flower.png" class="scaled">
or
<img src="flower.png" style="transform: scale(0.7);">
Use this easy scaling technique
img {
max-width: 100%;
height: auto;
}
#media {
img {
width: auto; /* for ie 8 */
}
}
img {
max-width:100%;
}
div {
width:100px;
}
with this snippet you can do it in a more efficient way
We can resize image using CSS in the browser using media queries and the principle of responsive design.
#media screen and (orientation: portrait) {
img.ri {
max-width: 80%;
}
}
#media screen and (orientation: landscape) {
img.ri { max-height: 80%; }
}
You always need something like this
html
{
width: 100%;
height: 100%;
}
at the top of your css file
Try this:
div.container {
max-width: 200px;//real picture size
max-height: 100px;
}
/* resize images */
div.container img {
width: 100%;
height: auto;
}
image_tag("/icons/icon.gif", height: '32', width: '32')
I need to set height: '50px', width: '50px' to image tag and this code works from first try note I tried all the above code but no luck so this one works and here is my code from my _nav.html.erb:
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>