I am creating a web page and came across a problem, there are 4 images displayed on a flex in my page, when i click "inspect" and see how it displays on other devices, i see 2 images on top and 2 on the bottom.enter image description here
But when I go back and display it on my laptop i see 3 images on top and 1 at the bottomenter image description here
I want to know what can i do to fix it, in order that it always displays the images as in the first picture(2 on top, 2 on the bottom).
Here is a piece of my code
img {
width: 350px;
padding: 5px;
transition: transform .2s;
}
img:hover {
cursor: pointer;
transform: scale(1.03);
}
.container {
margin-top: 80px;
display: flex;
max-width: 1500px;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
The browser will fit as many of those images with a width of 350px on one line. If it doesn't fit it will wrap them to the next line.
If you want to have always two images per line in your flex box, you could set the width of the image to 50% of the screen width. Because you have 5px of padding on each side, you could subtract that from 50% using the calc() function, like this:
width: calc(50% - 10px);
Here's an example of how your code might look:
img {
width: calc(50% - 10px);
padding: 5px;
transition: transform 0.2s;
}
img:hover {
cursor: pointer;
transform: scale(1.03);
}
.container {
margin-top: 80px;
display: flex;
max-width: 1500px;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
<body>
<div class="container">
<img src="https://source.unsplash.com/random" alt="" />
<img src="https://source.unsplash.com/random" alt="" />
<img src="https://source.unsplash.com/random" alt="" />
<img src="https://source.unsplash.com/random" alt="" />
</div>
</body>
Related
I am trying to create a grid of tiles, which sounds easy enough.
The problem I run into is that I want to have each row overflow in the X axis and each tile to expand on hover.
When the tile is expanded on hover it should only push aside its siblings, not the row above/below.
I have made a version that works, but the code is not exactly elegant and the only reason in works is using negative bottom-margins to push the lines lines together as well as setting the aspect ratio on the background image. The way I understand it this happens because Flex is trying to fit all items into it's container. I also don't quite understand how setting the aspect ratio of the image can override flexbox's need to fit everything inside the frame.
I've made a code pen of it demonstrating the code, but I would love for someone to help me coming up with a better solution since this is quite messy!
If this could be achieved in HTML and CSS only that would be great.
So here's the requirements I want to have:
several rows with 11 tiles that overflows in the X direction without creating scrollbars so that the user can horizontal scroll on each line
when hovering over a tile it should push the items in the same row to the side, but not the line above/below
when hovering the tile size should increase by X%, but the content (text) should not increase in size
the box-shadow should not be cut off by the line below when hovering
Link to codepen
HTML:
<div class="grid">
<div class="row">
<div class="tile">
<div class="text">
<p>Text</p>
</div>
<img class="background-image" src="">
</div>
</div>
</div>
CSS
grid {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
/* firefox */
scrollbar-width: none;
overflow-x: auto;
}
/* chrome */
.grid::-webkit-scrollbar {
display: none;
}
.row {
position: relative;
display: flex;
align-items: center;
gap: 1vw;
height: 12vw;
margin-bottom: -4vw;
overflow-y: hidden;
/* FireFox */
scrollbar-width: none;
}
/* chrome */
.row::-webkit-scrollbar {
display: none;
}
.tile {
position: relative;
height: 6vw;
width: 10vw;
transition: 350ms all;
}
.tile:hover {
height: 8vw;
width: 13vw;
z-index: 2;
box-shadow: 1vw 0.5vw 1vw #00000075;
}
.text {
position: absolute;
bottom: 0;
font-size: 1.5vw;
height: 30%;
transition: all 250ms;
}
.tile:hover .text {
font-size: 2.5vw;
height: 100%;
z-index: 3;
}
.background-image {
object-fit: cover;
object-position: 50% 10%;
aspect-ratio: 1.62/1;
height: 100%;
}
I have an image and a div that go next to each other like this:
Instead it looks like this:
I tried to use flex-shrink and grow and that didn't help. Maybe I should take another approach? Or I am just using flexbox wrong here?
.explore-adoption {
display: flex;
flex-direction: row;
max-height: 487px;
height: 100%;
align-items: center;
margin-top: 100px;
width: 100%;
text-align: center;
}
.explore-info {
max-width: 600px;
width: 100%;
max-height: 487px;
height: 100%;
padding: 4em;
background-color: #363635;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
flex-grow: 0;
gap: 1em;
}
.explore-image img {
width: 100%;
align-self: center;
}
<section class="explore-adoption">
<div class="explore-info">
<h2 class="section-title light">Explore adoption safely and securely</h2>
<p class="text-content light">Our platforms empower women considering adoprion by providing choice and privacy.</p>
<!-- ??? -->
<a href="#" class="section-link light">
<span>Learn more</span>
<i class="fa-solid fa-circle-arrow-right"></i>
</a>
</div>
<div class="explore-image">
<img src="https://via.placeholder.com/200" alt="Birthmother at computer">
</div>
</section>
Responsive Font-size
Set the default font-size for the page by setting it on the root element (html or :root). Any lengths set in rems will be relative to the font-size (from now on it will be referred to as fs) of root. If the fs of root is 16px (browser default) then a length of 2rem is 32px.
In the example, the fs of root is a relative length: 5vmin. vmin/vmax is relative to either the viewport's width or height. If it is vmin, then lengths are relative to the smaller length of the current viewport dimensions -- if it is in vmax, then lengths are relative to the larger length of the current viewport.
Ex. a viewport width of 800px and height of 450px -- 5vmin means 1rem is 5% of 450px and 5vmax means 1rem is 5% of 800px. Since lengths are relative to viewport, if the browser window changes at anytime, all lengths set in rem recalculates and adjusts accordingly. So if all of the lengths are in rem, you'd have a fully responsive page, but it's not perfect. There will be a point when the ratio of lengths will change when the viewport ratio is flipped from landscape to portrait or if one of the viewport dimensions becomes disappropriately smaller or bigger. That situation is beyond the scope of the question so I'll give you a hint: one solution is media queries.
Responsive Elements
Set width and height in percentages.
The parent element that contains both text and image elements should be a flex container and have no padding and margins and hide any vertical overflow (see Figure I).
Figure I - Parent Element (aka article.adoption)
.adoption {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
overflow-y: hidden;
}
Next, the right-side element that has the text should be an flex container with a vertical stacking flow. Set it's height to 100% and it's width to 50%. (see Figure II)
Figure II - Text Element (aka section.info)
.info {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 50%;
height: 100%;
}
Then on the left-side element that has the <img>, set it's height to 100%, width to 50%, remove padding, and hide any vertical overflow. (see Figure III)
Figure III - Image Element (aka figure.image)
.image {
width: 50%;
height: 100%;
padding: 0;
overflow-y: hidden;
}
For the <img>, I cropped it so that it's a square using a program: paint.NET. Then set <img> width to 100%. If there's a small gap at the bottom, add the following ruleset to figure.image: margin: 0 0 -0.5rem 0. That'll drag the image down and past the bottom border where it'll be hidden by overflow-y: hidden.
View this example in full page mode, dimensions are distorted if viewed in an <iframe>
Note there's an red dashed outline that shows that the two elements are flush -- this is for demonstration purposes and recommended that you remove the ruleset: outline: 1px dashed red from .adoption
html {
font: 300 5vmin/1.2 'Segoe UI'
}
.adoption {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
color: whitesmoke;
background: #363635;
overflow-y: hidden;
outline: 1px dashed red;
}
.info {
background-color: #363635;
display: inline-flex;
flex-flow: column nowrap;
justify-content: center;
gap: 0.5rem;
width: 50%;
height: 100%;
padding: 1.75rem;
}
.title {
margin: 0;
font-size: 1.25rem;
}
.link {
color: whitesmoke;
text-decoration: none;
}
.image {
width: 50%;
height: 100%;
margin: 0 0 -0.5rem 0;
padding: 0;
overflow-y: hidden;
}
.image img {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
<article class="adoption">
<section class="info">
<h2 class="title">Explore Adoption Safely & Securely</h2>
<p>Our platforms empower women considering adoption by providing choice and privacy.</p>
<a href="#" class="link">
<span>Learn more </span>
<i class="fa-solid fa-circle-arrow-right"></i>
</a>
</section>
<figure class="image">
<img src="https://i.ibb.co/zNPS1z7/mother.jpg" alt="Birthmother at computer">
</figure>
</article>
I made each "side" to be 50% width. Also added align-items: stretch; to the flex to stretch items vertically. Notice: to make it responsive I removed the max-height. Also added height:100% for the img in case the text makes the left side too high.
* {
box-sizing: border-box;
}
.explore-adoption {
align-items: center;
margin-top: 100px;
text-align: center;
display:flex;
align-items: stretch;
}
.explore-info {
width: 50%;
padding: 4em;
background-color: #363635;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
flex-grow: 0;
gap: 1em;
}
.explore-image {
width: 50%;
}
.explore-image img {
display:block;
width: 100%;
height: 100%;
}
<section class="explore-adoption">
<div class="explore-info">
<h2 class="section-title light">Explore adoption safely and securely</h2>
<p class="text-content light">Our platforms empower women considering adoprion by providing choice and privacy.</p>
<!-- ??? -->
<a href="#" class="section-link light">
<span>Learn more</span>
<i class="fa-solid fa-circle-arrow-right"></i>
</a>
</div>
<div class="explore-image">
<img src="https://via.placeholder.com/200" alt="Birthmother at computer">
</div>
</section>
<br>
I'm having an issue with flexbox on IE11 and while I'm aware there's lots of known issue, I haven't been able to find a solution...
<div class="latest-posts">
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>THIS IS POST TITLE</h2>
<p>BLAH</p>
</div>
</article>
</div>
And the CSS...
img {
max-width: 100%;
}
.latest-posts {
margin: 30px auto;
}
article.post-grid {
width: 375px;
float: left;
margin: 0 25px 100px 0;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #f3f3f3;
border-radius: 2px;
font-size: 14px;
line-height: 26px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
}
.article-content {
padding: 20px 35px;
}
Images are getting stretched within a flex container.
Applying align-items: flex-start (I figured, since "stretched" is the default value...) or justify-content: flex-start doesn't seem to work.
Codepen: example of what I mean
What am I doing wrong?
to avoid this funny behavior, you may reset the flex-shrink property.
This looks like a bug, despite what Microsoft says:
<'flex-shrink'>
Sets the flex shrink factor or negative flexibility for the flex item. The flex shrink factor determines how much a flex item will shrink relative to the other items in the flex container.
If omitted, the element's negative flexibility is "0". A negative value is not valid.
Source: https://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx https://msdn.microsoft.com/en-us//library/hh772069%28v=vs.85%29.aspx
img {
max-width: 100%;
flex-shrink: 0;
}
img {
max-width: 100%;
flex-shrink: 0;
}
.latest-posts {
margin: 30px auto;
}
article.post-grid {
width: 375px;
float: left;
margin: 0 25px 100px 0;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #f3f3f3;
border-radius: 2px;
font-size: 14px;
line-height: 26px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
}
article.post-grid .article-content {
padding: 20px 35px;
}
<div class="latest-posts">
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>THIS IS POST TITLE</h2>
<p>Society excited by cottage private an it esteems. Fully begin on by wound an. Girl rich in do up or both. At declared in as rejoiced of together.</p>
</div>
</article>
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS</h2>
<p>Recommend new contented intention improving bed performed age.</p>
</div>
</article>
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>SHORT TITLE</h2>
<p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward.</p>
</div>
</article>
</div>
http://codepen.io/anon/pen/KzBOvq
I had image stretch on the cross-axis (stretch in height, using flex-direction: row).
This Stack Overflow Q/A helped me solve it:
Link here
I had to set the following CSS on my img:
align-self: flex-start;
You might need another value than flex-start of course, depending on your goal. Mine is to have my image be at the top of the row.
I had a similar bug in IE11.
The styles were taken from Bootstrap 4.1, so for the fluid images I had:
.img-fluid {
border: none;
height: auto;
max-width: 100%;
}
In my case it appeared that the reason was in max-width: 100% so when I changed it to width: 100% the bug disappeared:
.img-fluid {
border: none;
height: auto;
width: 100%;
}
This solution is not for everyone's case but I hope it would be helpful.
in my case combination of "flex-shrink: 0" suggested by G-Cyr and "align-self: flex-begin" suggested by Rick Schoonbeek did the trick. I had a wrapper which was using flex box to center the image with a "justify-content: center;"
All was good in IE 11, Chrome, Safari except IE Edge was not able to display correctly. adding the two attributes on image resolved the problem with IE Edge.
I tried every solution here but nothing worked. The only thing I was using flexbox for was to vertically center an image shown when hovering another image. So I just used a more classic solution à la top: 50%; transform: translateY(-50%) and then it was ok. So essentially not using flexbox at all then.. #hateIE
I had an issue with stretched product images in IE11, and I did some research and tried different things.
This was my code:
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
height: 100%;
object-fit: contain;
top: 0;
}
}
I then realized that my image height: 100% was the culprit of the stretched image, and I simply removed my height, but then my image was at the top of my .productImage container instead of being centered vertically. I introduced flex here and positioned it through a simple align-items: center, but this of course didn't work in IE11. I also tried the flex-shrink: 0 but that didn't work either.
I then went ahead to skip using flex and tried the classic top: 50%; left: 50%; transform: translate(-50%, -50%); but this wasn't good either since I already had a transform in use for my zoom on hover effect on the image.
I ended up with this solution instead:
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
It worked like a charm
I'm trying to center an element (im my case an image) with arbitrary size inside a box. Everything works fine in Webkit browsers, but Firefox stretches images that are longer than they are wide.
To illustrate the problem, I create 3 div as boxes, each of containing a differently sized image. The boxes are all set to a fixed width and height, and a couple of flexbox rules are applied to center the image both vertically and horizontally.
* {
box-sizing: border-box;
}
.box {
display: flex;
width: 100px;
height: 100px;
border: 1px solid black;
justify-content: center;
align-items: center;
float: left;
margin-right: 50px;
}
.box img {
max-width: 100%;
max-height: 100%;
}
<div class="box">
<img src="http://dummyimage.com/150x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/300x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/150x300/eeeeee.png">
</div>
The img should be shrunk such that they exactly fill the box (either horizontally or vertically, which ever side is longer), but preserving the aspect ratio. This is exactly what happens in Webkit browsers. However, Firefox just stretches the one image that is longer than high in vertical direction. How can I make Firefox behave the same way as all the Webkit browsers?
Using "object-fit: contain" for the images seems to do the trick :)
.box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
http://jsfiddle.net/xjwguxs6/
Setting flex-basis: 100% fixes the issue as it sets the initial main size of the flex item. If the flex-direction is reversed i.e. column, you will need to use flex-basis: 100% on nth-child(3)
.box:nth-child(2) img {
flex-basis: 100%;
}
* {
box-sizing: border-box;
}
.box {
display: flex;
width: 100px;
height: 100px;
border: 1px solid black;
justify-content: center;
align-items: center;
float: left;
margin-right: 50px;
}
.box img {
max-width: 100%;
max-height: 100%;
}
.box:nth-child(2) img {
flex-basis: 100%;
}
<div class="box">
<img src="http://dummyimage.com/150x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/300x150/eeeeee.png">
</div>
<div class="box">
<img src="http://dummyimage.com/150x300/eeeeee.png">
</div>
I have an image of 400px and a div that is smaller (the width is not always 300px as in my example). I want to center the image in the div, and if there is an overflow, hide it.
Note: I must keep the position:absolute on the image. I'm working with css-transitions, and if I use position:relative, my image shakes a bit (https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/).
jsfiddle
http://jsfiddle.net/wjw83/1/
You should make the container relative and give it a height as well and you're done.
http://jsfiddle.net/jaap/wjw83/4/
.main {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 200px;
}
img.absolute {
left: 50%;
margin-left: -200px;
position: absolute;
}
<div class="main">
<img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
If you want to you can also center the image vertically by adding a negative margin and top position: http://jsfiddle.net/jaap/wjw83/5/
None of the above solutions were working out well for me. I needed a dynamic image size to fit in a circular parent container with overflow:hidden
.circle-container {
width:100px;
height:100px;
text-align:center;
border-radius:50%;
overflow:hidden;
}
.circle-img img {
min-width:100px;
max-width:none;
height:100px;
margin:0 -100%;
}
Working example here:
http://codepen.io/simgooder/pen/yNmXer
Most recent solution:
HTML
<div class="parent">
<img src="image.jpg" height="600" width="600"/>
</div>
CSS
.parent {
width: 200px;
height: 200px;
overflow: hidden;
/* Magic */
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
Found this nice solution by MELISSA PENTA (https://www.localwisdom.com/)
HTML
<div class="wrapper">
<img src="image.jpg" />
</div>
CSS
div.wrapper {
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
width:200px;
}
div.wrapper img {
margin:-100%;
}
Center any size image in div
Used with rounded wrapper and different sized images.
CSS
.item-image {
border: 5px solid #ccc;
border-radius: 100%;
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
text-align: center;
}
.item-image img {
height: 200px;
margin: -100%;
max-width: none;
width: auto;
}
Working example here codepen
For me flex-box worked perfect to center the image.
this is my html-code:
<div class="img-wrapper">
<img src="..." >
</div>
and this i used for css:
I wanted the Image same wide as the wrapper-element, but if the height is greater than the height of the wrapper-element it should be "cropped"/not displayed.
.img-wrapper{
width: 100%;
height: 50%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
height: auto;
width: 100%;
}
working solution with flex-box for posterity:
main points:
overflow hidden for wrapper
image height and width must be specified, cannot be percentage.
use any method you want to center the image.
wrapper {
width: 80;
height: 80;
overflow: hidden;
align-items: center;
justify-content: center;
}
image {
width: min-content;
height: min-content;
}
<html>
<head>
<style type="text/css">
.div-main{
height:200px;
width:200px;
overflow: hidden;
background:url(img.jpg) no-repeat center center
}
</style>
</head>
<body>
<div class="div-main">
</div>
</body>
just make sure how you are using image through css background use backgroud image position like background: url(your image path) no-repeat center center; automatically it wil align center to the screen.
this seems to work on our site, using your ideas and a little math based upon the left edge of wrapper div. It seems redundant to go left 50% then take out 50% extra margin, but it seems to work.
div.ImgWrapper {
width: 160px;
height: 160px
overflow: hidden;
text-align: center;
}
img.CropCenter {
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 160px !important;
}
<div class="ImgWrapper">
<img class="CropCenter" src="img.png">
</div>
I have been trying to implement Jaap's answer inside this page of my recent site, with one difference : the .main {height:} was set to auto instead of a fixed px value.
As responsive developer i am looking for a solution to synchronize the image height with the left floating text element, yet only in case my text height becomes greater then my actual image height.
In that case the image should not be rescaled, but cropped and centered as decribed in the original question here above.
Can this be done ?
You can simulate the behaviour by slowly downsizing the browser's width.
This issue is a huge pain in the a.. but I finally got it.
I've seen a lot of complicated solutions. This is so simple now that I see it.
.parent {
width:70px;
height:70px;
}
.child {
height:100%;
width:10000px; /* Or some other impossibly large number */
margin-left: -4965px; /* -1*((child width-parent width)/2) */
}
.child img {
display:block; /* won't work without this */
height:100%;
margin:0 auto;
}
you the have to corp your image from sides to hide it try this
3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...
one of the demo for the first way on the site above
try demo
i will do some reading on it too