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:
Related
I have a vanilla site and have a lot of posts already. The banner feature image for all of them is set to "top aligned" as a default setting so it looks pretty bad. I'd like ALL banner featured images to simply be vertically center aligned.
I tried this .css from a post, but it doesn't work in style.css, has no affect (maybe it just impacts the main landing page?).
.banner {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Does anyone have a simple solution that doesn't require plugins? Thanks.
Following my comment I created a little snippet showcasing what I mean with:
Using display: grid; place-items: center on an elements parent usually horizontally and vertically centers the parent content, whether this is center viewport depends on height/width of the parent...
snippet
* { outline: 1px dashed } /* for debugging */
/********************************/
/* some convenient global rules */
/********************************/
* { box-sizing: border-box }
html, body { width: 100%; max-width: 100% }
/* make room to minimally occupy the full viewport */
body { min-height: 100vh; margin: 0 }
/* ... and kill the default margin */
/* some full page parent */
.parent {
display: grid; place-items: center;
width: 100vw; height: 100vh;
}
.banner {
/* restrict banner size, either 30rem
or full width if less available (mobile) */
max-width: min(30rem, 100%);
}
img {
display: block; /* removes tiny space below image */
width: 100%; /* stretch to fill parent */
height: auto; /* follow where width leads */
object-fit: cover; /* clip if larger than space available */
}
<div class="parent">
<div class="banner">
<!-- retrieve some large picture -->
<img src="https://picsum.photos/1280?random">
</div>
</div>
After exhaustive search, I found the best solution is the show the whole image. This requires an override of the theme settings. To get there, from the control panel, go to: Appearance -> Themes -> Customize. Then at the bottom of the left column, click on Additional CSS. Enter the following and click Publish button at the top of the left column...
.post__thumbnail
{
padding: 29% !important;
}
I would have liked to keep the image frame dynamic and shown on the center sliver of the image as best served for various devices, but for now, this was the best option for me.
having an issue with browser support right now.
I have it working as hoped for Firefox and Chrome, however on safari I am having issues with images. Currently, the image is set using "object-fit: cover" and has the intended effect on Chrome/firefox. But for safari, it seems to ignore it and the image is very large.
Here is a screenshot. The left is the intended the right is the actual outcome.
Here is an html and css snippet of my code effecting this row/column.
<div class="feature-image">
<img class="img-1" src="#/assets/preview-images/feature 1.png" alt="">
</div>
.feature-image {
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.img-2 {
max-width: 320px;
}
}
I had the same issue. I found that setting a min-height of %
100% instead of a height of 100% solved it in Safari. I haven't tested it on width but it might work for you.
.object-fit-cover-photo {
width: 100%;
min-height: 100%;
object-fit: cover;
}
I had a similar issue and managed to fix it by replacing percentage value of the width (or max-width) property with fixed (rem or px) values. In my case, Safari failed to calculate object-fit correctly when the img element's width was in % or inherited auto values.
In my case there was an <img> inside of a <picture> tag. And safari was failing to calculate object-fit property.
So as arixtty mentioned - replacing percentage value of the width(for img) with "initial" value have helped. Or you can use fixed value in your case instead
Well The Easiest Workaround is to Simply remove object-fit: cover and add it using scale . Its been tested and it works great
.object-fit-cover-photo {
width: 100%;
min-height: 100%;
/*object-fit: cover;*/
scale : 1.2; // or whasoever fits best for the device
}
Also add it using media queries to ensure that its added to all standard devices .
That would basically fix this bug .
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;
}
}
I'm just starting with flex layout and encounter one problem. I have the following code:
wrapper {display: flex; width: 100%; }
graphic {flex-grow: 1; flex-shrink: 1; text-align: center;}
graphic img {width: 100%; max-width: 400px;}
nav {width: 200px;}
<wrapper>
<nav><img src="http://lorempixel.com/200/200/" /></nav>
<graphic><img src="http://lorempixel.com/200/100/" /></graphic>
<nav><img src="http://lorempixel.com/200/200/" /></nav>
</wrapper>
Left and right are fixed width; center grows and shrinks when resizing the browser window - OK so far. However I would like to prevent the center image from exceeding it's natural size. I expected that max-width would do the job but it doesn't. Can you explain why and how to do in a correct way?
My browser is Opera. PS: Sorry for the selfmade tags, I got this code from another forum and didn't correct it yet.
By looking at your code it looks like the max-width: 400px should be applied to the parent element of the image, in this case <graphic> this will prevent the image container from being larger than 400px.
graphic {
flex-grow: 1;
flex-shrink: 1;
max-width: 400px;
text-align: center;
}
graphic img {
width: 100%;
}
I have an image within a flex container.
The image stays at its original height in Chrome and will not resize proportionally. It works in Firefox however.
<figure>
<img src="image.jpg">
A link to somewhere
</figure>
figure {
display: flex;
width: 100%;
}
figure img {
max-width: 50%;
height: auto;
}
Flex makes its children equal in height by default. To disable this behavior, you can specify align-items: flex-start.
https://jsfiddle.net/3s2hLv92/1/