I keep facing a strange problem on my website when it is displayed on an iPad (phone, etc works fine, also no problems on devtool responsive mode ).
Here is the problem on my live site
I have 3 images displayed inside a flex div, the height of the div is not set and it adapts depending on the width of the images ( 32 % ). It's okay on any device, but on iPad it get stretched. I'm having trouble finding where the problem is. ( BTW how do you debug on iPad ? )
.sicily_pics {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 30px;
height: fit-content;
}
.sicily_pics img {
width: 32%;
margin-right: 2%;
height: auto;
}
.sicily_pics img:last-child {
margin-right: 0%;
}
<div class="sicily_pics">
<img src="https://via.placeholder.com/375x500" alt="Greek Theater in Taormina">
<img src="https://via.placeholder.com/375x500" alt="Isola Bella">
<img src="https://via.placeholder.com/375x500" alt="Mount Etna">
</div>
In most contexts, align-items defaults to stretch on flex containers such as .sicily_pics. To change this, you need to add something like align-items: start, align-items: end, or align-items: baseline to the element. This will prevent the images from being stretched to the height of the tallest image.
.sicily_pics {
/* ... */
align-items: start;
}
This change will give you images of different heights, however, which you may not want. If you want to keep the images in line with each other and resize them by cropping, rather than stretching, you can leave the flex container alone and instead add object-fit: cover to the images.
.sicily_pics img {
/* ... */
object-fit: cover;
}
Side note: You can remove the height: auto from the images – auto is the default value for <img> elements.
Side note 2: You need Safari on macOS to debug Safari on iOS or iPadOS:
Struggling to find the right title that isn't just a mixture of "help" and "what, CSS, why?!" so hopefully a couple of you geniuses will find this...!
I have two columns. Each of them has a full-width div inside it which contains a logo. The images are quite different shapes, one being a square and one being a more panoramic aspect ratio. To achieve a balanced look, the images are set to a max-width of 50% and a max-height of 100%. Flexbox is used to center the images both horizontally and vertically.
They look perfectly fine.
// working before wrapping images with links
section.working {
div.flex {
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 50%;
max-height: 100%;
}
}
}
And then I needed to add links.
https://codepen.io/lenoz/pen/VwZyeOG
This is the problem reduced to its most simple, in that the bottom row was the original code I was using to get the perfect layout, and the top row shows what happens when the images were wrapped in tags to make them links. Some points of note:
colours added just to help distinguish boundaries a little - useful for detecting when the link (red background) is no longer constricted to the size of the image inside it (as it ideally should be)
the two columns are separate in the code and not part of a shared container - i.e. one cannot inform the height of the other (want to fix this with CSS not JS)
I should mention that of course there was no way adding links would just work - the <a> tags come in between the flex container and the flex item, so obviously they will mess with the layout.
Much appreciated if you can help me find a CSS solution.
Still here? Read on if you want some more info on my attempts to fix, with a side portion of Chrome weirdness.
It should also go without saying I've spent ages fiddling with this, so here's another link showing some of my efforts that have gotten close: https://codepen.io/lenoz/pen/pozpjVq
The top row (section.help) is my latest attempt, but is a bit of a mess simply because I stopped half way, having suffered frustration sufficient to lead to me making this post.
The middle row, which I'm calling section.weirdness, actually seemed to be a solution for a hot minute. If you're using Chrome, like I am, when you look at the Codepen link you may see nothing on these blue blocks?
But try removing the display: flex attribute from div.flex and, if your Chrome is like my Chrome, you'll see this:
Now, add that same display: flex attribute back on the same div.flex selector and you'll see that suddenly the blue blocks are not blank:
How strange is that? Browser rendering bug or what?
Now find the max-width or max-height attributes on div.image, toggle one of those off and then on again and you'll see that everything suddenly looks right again:
Somehow, without changing any CSS other than toggling it, we've gone from no links showing up at all, to them showing up and looking perfect. You can see how I'd managed to confuse myself into thinking I had got it working!
Just add style="display: contents" to your anchors
"display: contents" causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself
<div>
<a style="display: contents" href="#">
<img src="https://via.placeholder.com/1000x300.png" />
</a>
</div>
Here's a simple solution:
I've changed the columns to be flex contexts but retained an inner div to serve as the 50% width constraint. When the imgs are allowed to set their own height explicitly all the other constraints around them flow into place without much fuss, and because the anchors don't have any layout rules, they manage to avoid having any clickable areas outside their image.
With the same max-height on the images, they'll match in the same way as your .working class as long as their containers are the same width.
section {
width: 800px;
display: flex;
}
.column {
background-color: blue;
margin: 5px;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.column > div {
max-width: 50%;
}
img {
display: block; /* get rid of bottom gap */
max-width: 100%;
max-height: 80px;
}
<section>
<div class="column">
<div>
<a href="#">
<img src="https://via.placeholder.com/500x500.png" />
</a>
</div>
</div>
<div class="column">
<div>
<a href="#">
<img src="https://via.placeholder.com/1000x300.png" />
</a>
</div>
</div>
</section>
Try adding this to your Codepen example:
.flex > a {
flex: 0 0 50%;
height: 100%;
display: flex;
}
div.flex a > img {
max-width: 100% !important;
max-height: 100% !important;
margin: auto;
}
Any immediate child of a container with display: flex is flex item. To prevent that item from growing or shrinking we must set flex-grow and flex-shrink properties to 0. In my case I used flex: 0 0 50% shorthand for that. That last value of 50% is from your initial image max-width property. That + height:100% will make sure that <a> behaves like images in your original example.
Now the fun part: use display: flex again on <a> to make the image flex item again. Since <a> is already properly sized we can set max-width and max-height to `00% to fill available space.
Using margin: auto is a neat trick to center both horizontally and vertically flex child inside of flex container (works only when there is one child).
sidenote: I used important to override specificity without changing markup but I would advise against it and put new CSS class on both a and img.
UPDATE
working fork (Chrome only): https://codepen.io/teodragovic/pen/wvwpWbx?editors=1100
section.broken {
.flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a {
max-width: 50%;
max-height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
}
}
In order to have responsive images on a web-site, I am using overflow: hidden style on the image's container, with other rules related to max-height and automatic width so for the given screen width images have the same ratio on the visible area, almost no matter what is the image itself. And it works with landscape images well.
However, some portrait-oriented images have long hidden area, and when you tap the link on the image in iPhone's Safari, it will show (highlight) the whole extent of the image in addition to Save and other options' menu.
Markup used is roughly this:
<figure>
<div class="image-wrapper">
<a href="...">
<img src="http://lorempixel.com/200/400/">
</a>
</div>
</figure>
Styles (excerpt, without widths and unrelated):
a {
max-width: 900px;
max-height: 120px;
overflow: hidden;
display: block;
}
div {
max-width: 900px;
position: relative;
overflow: hidden;
max-height: 120px;
}
img {
width: 100%;
}
At first I thought, that it is because <a> fills <img>, so I've added display: block and max-height, but it does not help. This means, that tap menu is for the image, and full image is hightlighted.
Is there any way to show only visible part in tap highlight?
One option is to give pointer-events: none declaration the image element.
It prevents the image from being the target of the pointer (on click/tap).
For instance:
a img { pointer-events: none; }
It's worth noting that pointer-events is supported in iOS Safari 3.2+.
I am working with images, and I ran into a problem with aspect ratios.
<img src="big_image.jpg" width="900" height="600" alt="" />
As you can see, height and width are already specified. I added a CSS rule for images:
img {
max-width: 500px;
}
But for big_image.jpg, I receive width=500 and height=600. How do I set images to be re-sized, whilst keeping their aspect ratios.
img {
display: block;
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
This will make image shrink if it's too big for specified area (as downside, it will not enlarge image).
Here's a solution:
object-fit: cover;
width: 100%;
height: 250px;
You can adjust the width and height to fit your needs, and the object-fit property will do the cropping for you.
More information about the possible values for the object-fit property and a compatibility table are available here: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
The solutions below will allow scaling up and scaling down of the image, depending on the parent box width.
All images have a parent container with a fixed width for demonstration purposes only. In production, this will be the width of the parent box.
Best Practice (2018):
This solution tells the browser to render the image with max available width and adjust the height as a percentage of that width.
.parent {
width: 100px;
}
img {
display: block;
width: 100%;
height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
<img width="400" height="400" src="https://placehold.it/400x400">
</div>
Fancier Solution:
With the fancier solution, you'll be able to crop the image regardless of its size and add a background color to compensate for the cropping.
.parent {
width: 100px;
}
.container {
display: block;
width: 100%;
height: auto;
position: relative;
overflow: hidden;
padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}
.container img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
<div class="container">
<img width="640" height="220" src="https://placehold.it/640x220">
</div>
</div>
For the line specifying padding, you need to calculate the aspect ratio of the image, for example:
640px (w) = 100%
220px (h) = ?
640/220 = 2.909
100/2.909 = 34.37%
So, top padding = 34.37%.
Very similar to some answers here, but in my case I had images that sometimes were taller, sometimes larger.
This style worked like a charm to make sure that all images use all available space, keep the ratio and not cuts:
.img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
The background-size property is ie>=9 only, but if that is fine with you, you can use a div with background-image and set background-size: contain:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally within the div. Just don't forget to set the sizes on the css since divs don't have the width/height attribute on the tag itself.
This approach is different than setecs answer, using this the image area will be constant and defined by you (leaving empty spaces either horizontally or vertically depending on the div size and image aspect ratio), while setecs answer will get you a box that exactly the size of the scaled image (without empty spaces).
Edit:
According to the MDN background-size documentation you can simulate the background-size property in IE8 using a proprietary filter declaration:
Though Internet Explorer 8 doesn't support the background-size property, it is possible to emulate some of its functionality using the non-standard -ms-filter function:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Remove the "height" property.
<img src="big_image.jpg" width="900" alt=""/>
By specifying both you are changing the aspect ratio of the image. Just setting one will resize but preserve the aspect ratio.
Optionally, to restrict oversizings:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
Firefox 71+ (2019-12-03) and Chrome 79+ (2019-12-10) support internal mapping of the width and height HTML attributes of the IMG element to the new aspect-ratio CSS property (the property itself is not yet available for direct use).
The calculated aspect ratio is used to reserve space for the image until it is loaded, and as long as the calculated aspect ratio is equal to the actual aspect ratio of the image, page “jump” is prevented after loading the image.
For this to work, one of the two image dimensions must be overridden via CSS to the auto value:
IMG {max-width: 100%; height: auto; }
<img src="example.png" width="1280" height="720" alt="Example" />
In the example, the aspect ratio of 16:9 (1280:720) is maintained even if the image is not yet loaded and the effective image width is less than 1280 as a result of max-width: 100%.
See also the related Firefox bug 392261.
Here is a solution :
img {
width: 100%;
height: auto;
object-fit: cover;
}
This will make sure the image always covers the entire parent (scaling down and up) and keeps the same aspect ratio.
Just add this to your css, It will automaticly shrink and expand with keeping the original ratio.
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
This is mental. Use the scale-down property - it explains itself.
Inline styling:
<img src='/nic-cage.png' style={{ maxWidth: '50%', objectFit: 'scale-down' }} />
This will stop flex from stretching it. In this case, the image would go to 50% of the width of its parent container and the height would scale down to match.
Keep it simple.
Just replace the height attribute by the aspect-ratio attribute.
img {
max-width: 500px;
aspect-ratio: 900 / 600;
}
<img src="big_image.png" width="900"/>
The aspect-ratio attribute is not necessary, but prevent image layout shifts.
To maintain a responsive image while still enforcing the image to have a certain aspect ratio you can do the following:
HTML:
<div class="ratio2-1">
<img src="../image.png" alt="image">
</div>
And SCSS:
.ratio2-1 {
overflow: hidden;
position: relative;
&:before {
content: '';
display: block;
padding-top: 50%; // ratio 2:1
}
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
This can be used to enforce a certain aspect ratio, regardless of the size of the image that authors upload.
Thanks to #Kseso at http://codepen.io/Kseso/pen/bfdhg. Check this URL for more ratios and a working example.
Set the CSS class of your image container tag to image-class:
<div class="image-full"></div>
and add this you your CSS stylesheet.
.image-full {
background: url(...some image...) no-repeat;
background-size: cover;
background-position: center center;
}
I would suggest for a responsive approach the best practice would be using the Viewport units and min/max attributes as follows:
img{
display: block;
width: 12vw;
height:12vw;
max-width:100%;
min-width:100px;
min-height:100px;
object-fit:contain;
}
To force image that fit in a exact size, you don't need to write too many codes. It's so simple
img{
width: 200px;
height: auto;
object-fit: contain; /* Fit logo in the image size */
-o-object-fit: contain; /* Fit logo fro opera browser */
object-position: top; /* Set logo position */
-o-object-position: top; /* Logo position for opera browser */
}
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">
https://jsfiddle.net/sot2qgj6/3/
Here is the answer if you want to put image with fixed percentage of width, but not fixed pixel of width.
And this will be useful when dealing with different size of screen.
The tricks are
Using padding-top to set the height from width.
Using position: absolute to put image in the padding space.
Using max-height and max-width to make sure the image will not over the parent element.
using display:block and margin: auto to center the image.
I've also comment most of the tricks inside the fiddle.
I also find some other ways to make this happen.
There will be no real image in html, so I personly perfer the top answer when I need "img" element in html.
simple css by using background
http://jsfiddle.net/4660s79h/2/
background-image with word on top
http://jsfiddle.net/4660s79h/1/
the concept to use position absolute is from here
http://www.w3schools.com/howto/howto_css_aspect_ratio.asp
You can use this:
img {
width: 500px;
height: 600px;
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}
You can create a div like this:
<div class="image" style="background-image:url('/to/your/image')"></div>
And use this css to style it:
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover
You can set the container to display: flex and align-items: center (other align-items values work too). Instead of align-items you can also set align-self on the image itself.
This will make image shrink if it's too big for specified area (as downside, it will not enlarge image).
The solution by setec is fine for "Shrink to Fit" in auto mode.
But, to optimally EXPAND to fit in 'auto' mode, you need to first put the received image into a temp id,
Check if it can be expanded in height or in width (depending upon its aspect ration v/s the aspect ratio of your display block),
$(".temp_image").attr("src","str.jpg" ).load(function() {
// callback to get actual size of received image
// define to expand image in Height
if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
$(".image").css('height', max_height_of_box);
$(".image").css('width',' auto');
} else {
// define to expand image in Width
$(".image").css('width' ,max_width_of_box);
$(".image").css('height','auto');
}
//Finally put the image to Completely Fill the display area while maintaining aspect ratio.
$(".image").attr("src","str.jpg");
});
This approach is useful when received images are smaller than display box. You must save them on your server in Original Small size rather than their expanded version to fill your Bigger display Box to save on size and bandwidth.
You Can use:-
transform: scaleX(1.2);
to change the width without changing height.
And
transform: scaleY(1.2);
to change the height without changing width
You can use this on images and video tags in html and css. This does not change the aspect ration also.
you can use aspect-ratio property css
.my-image {
aspect-ratio: 1/1; // square
aspect-ratio: 16/9; // wide screen 1080p
aspect-ratio: 4/3;
aspect-ratio: 2/3;
}
img {
max-width: 80px; /* Also works with percentage value like 100% */
height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">
<p>Let's say the author of the HTML deliberately wants
the height to be half the value of the width,
this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">
How about using a pseudo element for vertical alignment? This less code is for a carousel but i guess it works on every fixed size container. It will keep the aspect ratio and insert #gray-dark bars on top/bottom or left/write for the shortest dimension. In the meanwhile the image is centered horizontally by the text-align and vertically by the pseudo element.
> li {
float: left;
overflow: hidden;
background-color: #gray-dark;
text-align: center;
> a img,
> img {
display: inline-block;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
margin: auto;
text-align: center;
}
// Add pseudo element for vertical alignment of inline (img)
&:before {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
}
Fullscreen presentation:
img[data-attribute] {height: 100vh;}
Keep in mind that if the view-port height is greater than the image the image will naturally degrade relative to the difference.
If the application can have an image of any aspect ratio or resolution then you can manage height and width as in this link.
This uses Javascript and HTML
https://stackoverflow.com/a/65090175/13338731