I have an image that I want to fit in flexbox.
Card has fixed size, and I want the image to fit in without specifying size but it just ignores flexbox.
.card {
border: 2px solid #072227;
border-radius: 20px;
display: flex;
height: 30vh;
width: 40vw;
}
.card__profile-image {
display: flex;
flex-direction: column;
}
.img__cont img {
height: 100%;
}
.img__cont {
}
.card__name {
min-height: 100%;
}
<div class="card">
<div class="card__section card__profile-image">
<div class="img__cont">
<!-- <div class="image"> -->
<img src="https://scontent.fkiv9-2.fna.fbcdn.net/v/t39.30808-6/317808332_704091791080096_1098720845539800517_n.jpg?_nc_cat=1&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=FFO8v3dmkM8AX_aR9js&_nc_ht=scontent.fkiv9-2.fna&oh=00_AfDQCQcHmZH4QuauHvdxiLEFX0rExv9gMENs8ptsEzdoYg&oe=63DEF9AD" alt="Profile Picture" />
<!-- </div> -->
</div>
<div class="card__name">Alex Hill</div>
</div>
<div class="card__section">
<div class="card__info-top">
<span class="info__top-job">Senior Developer | A1-D</span>
<span class="info__top-contact">alexhill#0001</span>
</div>
<div class="card__info-bottom">6 000$</div>
</div>
</div>
https://codepen.io/watermelon-and-me/pen/jOpQGje
UPD.
Expected result:
https://i.imgur.com/MBRLAMp.png
On .img__cont and .img__cont img, set max-width and max-height to 100% each.
.card {
border: 2px solid #072227;
border-radius: 20px;
display: flex;
height: 30vh;
width: 40vw;
}
.card__profile-image {
display: flex;
flex-direction: column;
}
.img__cont, .img__cont img {
max-width: 100%;
max-height: 100%;
}
.card__name {
min-height: 100%;
}
<div class="card">
<div class="card__section card__profile-image">
<div class="img__cont">
<!-- <div class="image"> -->
<img src="https://scontent.fkiv9-2.fna.fbcdn.net/v/t39.30808-6/317808332_704091791080096_1098720845539800517_n.jpg?_nc_cat=1&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=FFO8v3dmkM8AX_aR9js&_nc_ht=scontent.fkiv9-2.fna&oh=00_AfDQCQcHmZH4QuauHvdxiLEFX0rExv9gMENs8ptsEzdoYg&oe=63DEF9AD" alt="Profile Picture" />
<!-- </div> -->
</div>
<div class="card__name">Alex Hill</div>
</div>
<div class="card__section">
<div class="card__info-top">
<span class="info__top-job">Senior Developer | A1-D</span>
<span class="info__top-contact">alexhill#0001</span>
</div>
<div class="card__info-bottom">6 000$</div>
</div>
</div>
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 1 year ago.
how do I make the three images on the top not go outside the div while keeping them to be 100% width so that their size remains the same and will be resized based on the browser size?
PS: I need them to be in row form
The ideal result should be like this:
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 30px;
}
.img-child {
width: 100%;
margin-right: 30px;
}
.img-child:last-child {
margin-right: 0;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
you need to add a min-width to your image. flex needs this for whatever reason, otherwise it will not downscale the elements. I come across this every time i use flex :D
.img-child {
min-width: 0;
width: 100%;
margin-right: 30px;
}
Try this :
body
{
height:100vh;
justify-content:center;
align-items:center;
display:flex;
}
#main {
width:391px;
background-color: #666666;
}
#main .img
{
width:100px;
float:left;
margin:15px;
}
#main .img:nth-child(4)
{
width:360px;
}
img
{
max-width:100%;
}
<div id=main>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
</div>
You can use max-width for each img.
I have edited your code for calculate padding each image below...
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second > div {
flex-basis: 100%;
flex-grow:1;
flex-shrink: 1;
padding-left: 15px;
padding-right:15px;
max-width:100%;
}
.img-child {
max-width:100%;
}
#second {
display: flex;
flex-direction: row;
margin-bottom: 30px;
margin-left:-15px;
margin-right:-15px;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
#second{
display: flex;
align-items: center;
justify-content: space-around;
}
.img-child{
width: 30%;
margin-top: 30px;
margin-bottom: 30px;
}
#img-parent{
width: 97%;
margin-left: 12px;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
* {
box-sizing: border-box;
}
.main {
background-color: #666666;
padding: 60px;
width: 100%;
}
.second {
background-color: #666666;
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.column {
float: left;
width: 33.3%;
padding: 5px;
}
.largep {
background-color: #666666;
display: flex;
flex-direction: row;
width: 100%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<style>
</style>
</head>
<body>
<div class="row main">
<div class="column second">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
<div class="largep">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
In fact, I would like to put my elements towards the left as below:
On my second_text class, I added text-align: left; but I always have the same problem.
.second_text{
padding-top: 10px;
text-align: left;
}
It is possible to force the block to left?
body{
padding-top:200px;
}
.container{
width: 95%;
margin: 0 auto;
}
.row{
display: flex;
padding-left: 20px;
padding-bottom:50px;
padding-top: 50px;
margin-left: 10%;
}
.img-block{
width: 4%;
}
.wrapper{
display: flex;
flex-direction: column;
padding-left: 15px;
}
.title{
padding-bottom: 10px;
}
.vertical{
border-left: 1px solid black;
height: 60px;
margin-left: 20px;
}
.img-block {
height: 28px;
padding-left: 15px;
width: 50px;
display: inline-block;
}
.img-pic{
display: inline-block;
height: 20px;
}
.second_text{
padding-top: 10px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="container">
<div class="row">
<img class="img-block" src="https://zupimages.net/up/20/21/mz4v.png" alt="image"/>
<div class="wrapper">
<div class="title">Phone</div>
<div class="second_text">Just For VIP Member</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/21/wgl0.png" alt="image"/>
<div class="wrapper">
<div class="title">Email Us</div>
<div class="second_text">admin#superbtc.biz</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/epbs.png" alt="image"/>
<div class="wrapper">
<div class="title">Follow us</div>
<div class="second_text">
<img class="img-pic" src="https://zupimages.net/up/20/34/pnpm.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/qgz1.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/gdph.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/alck.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/evtq.png" alt="image"/>
</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/txjb.png" alt="image"/>
<div class="wrapper">
<div class="title">Address</div>
<div class="second_text">2699 BORAMBOLA, New South Wales,Australia.</div>
</div>
</div>
</div>
</body>
</html>
Try using Negative Values to .second_text i.e Margin-left: -40px
Though this is not a best fix but can be a quick fix.
A simplified version. Restructure like this
.row {
display: flex;
}
.row .wrapper {
flex-grow: 1;
position: relative;
}
.row .wrapper .first-text {
display: flex;
align-items: center;
padding: 5px 15px;
}
.row .wrapper .second-text {
padding: 5px 15px;
}
.row .wrapper .first-text img {
margin-right: 15px;
}
.verticle {
background: black;
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
<div class="row">
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
</div>
A better solution would be to use position: relative and left: -40px on your .second_text.
I already have everything working on the desktop but now I just can't figure out why overflow-x won't work on iOs. I already tried to set the min-width to 0 of all children and also to work it out with table instead of flex.
In the end, it should be a horizontal scroll in the image-container div, that is showing all the images on x-scroll.
As already mentioned, it runs anywhere accept on the iPhone safari browser.
Here is the code so far:
sass:
#main-container {
#image-container {
height: 466px;
width: 95.47vw;
display: flex;
overflow: auto;
-webkit-overflow-scrolling: touch;
#images {
padding-top: 41px;
left: 0;
height: 466px;
width: 1399.8px;
display: flex;
align-items: flex-start;
justify-content: space-between;
border-spacing: 0;
.bodytext {
width: 296.46px;
}
.image {
padding-bottom: 0;
padding-right: 17.5px;
align-self: flex-end;
&:last-child {
padding-right: none;
}
img {
opacity: 100%;
width: 296.46px;
height: auto;
cursor: pointer;
}
img:hover {
opacity: 50%;
}
}
}
}
html:
<div id="main-container">
<div id="image-container">
<div id="images">
<div class="image" id="0-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<div class="image" id="1-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
<div class="image" id="2-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<div class="image" id="3-img">
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
<img ...>
<div class="bodytext">...</div>
<div class="bodytext">...</div>
</div>
</div>
</div>
Thanks a lot!
I'm trying to fill an area of web page of a certain, fixed size with an unknown number of images (max 10), maximising the size of the images without overflowing the area. To be mobile friendly, I want it to work both in landscape and portrait mode without needing scrolling.
I've been trying to use flexboxes to have the images wrap, but then they don't scale down and end up overflowing the area. If I use non-wrapping flexboxes, the images scale in landscape mode, but not in portrait. I feel there should be a nice, simple solution to this. Any ideas?
Update:
Here's the essence of the code I've got so far. I've been trying a lot of different things, but this is the cleanest.
html {
height: 100%;
}
body {
padding-top: 0;
padding-bottom: 0;
height: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
text-align: center;
}
.above {
margin-bottom: 20px;
font-size: larger;
background-color: lightgrey;
}
.middle {
flex-grow: 1;
max-height: 100%;
}
.below {
margin-top: 20px;
background-color: lightgrey;
}
img {
border: 5px solid transparent;
height: 100%;
}
.images {
flex-direction: row;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 100%;
}
.image {
margin: 5px;
}
<html>
<body>
<div class="container">
<div class="above">
Some text about the images
</div>
<div class="middle">
<div class="images">
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
</div>
</div>
<div class="below">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
</body>
</html>
The point is to try to get the images to stay completely within the div called "middle", but scaled as large as possible. Here are a few wireframes.
Landscape, 10 images:
Portrait, 10 images:
Portrait, 4 images
I Think you need to consider flex property here, it's the short hand version of flex-grow, flex-shrink, and flex-basis properties. See if this is what you're looking for.
html,body{
padding: 0;
margin: 0;
width: 100vw;
box-sizing: border-box;
}
.container{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}
.row{
display: flex;
width: 100%;
flex-direction: row;
}
.col{
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}
.item{
display: flex;
max-width: 100%;
height: 150px;
background-color: #222;
margin: 1%;
flex: 1 1 15%;
}
#media only screen and (max-width: 600px) {
.item {
height: 100px;
flex: 1 1 45%;
max-width: 100%;
}
}
<div class="container">
<div class="row ">
<div class="col">
<h1>some text about images</h1>
</div>
</div>
<div class="row">
<div class="col">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="row">
<div class="col">
<p>Some other elements</p>
</div>
</div>
</div>
I have a list of items, each one in display: flex to position its children elements. The height of the item is given by the image, and the button at the right position should fill the vertical space of the item. But I can't do that.
.Main-item {
display: flex;
border: 1px solid gray;
margin-bottom: 2px;
}
.Main-img {
height: 50px;
width: 50px;
overflow: hidden;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
.Main-name {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
flex: 1 1;
padding: 0 10px;
}
.Main-buttonWrapper {
height: 100%;
width: 146px;
}
.Main-button {
height: 100%;
width: 100%;
}
<div>
<div class="Main-item">
<img class="Main-img" src="https://picsum.photos/200/300" />
<div class="Main-name">Lorem ipsum</div>
<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
</div>
<div class="Main-item">
<img class="Main-img" src="https://picsum.photos/200/300" />
<div class="Main-name">Lorem ipsum</div>
<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
</div>
<div class="Main-item">
<img class="Main-img" src="https://picsum.photos/200/300" />
<div class="Main-name">Lorem ipsum</div>
<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
</div>
<div class="Main-item">
<img class="Main-img" src="https://picsum.photos/200/300" />
<div class="Main-name">Lorem ipsum</div>
<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
</div>
</div>
Any idea will be welcome!
When you create a flex container various default flex rules come into play.
Two of these default rules are flex-direction: row and align-items: stretch. This means that flex items will automatically align in a single row, and each item will fill the height of the container.
If you change the value of align-items to for example flex-start it will change the default behavior 'stretch' as well if you set a specific height to the child of a flex container.
So just remove the height: 100% from .Main-buttonWrapper and it will have the default behavior.
For a better understanding look this answer: https://stackoverflow.com/a/33220564/4966662
I've given a height to the Main-item + align-items:stretch;. I hope this is what you need.
.Main-item {
align-items:stretch;
height: 50px;
}
.Main-element {
padding-top: 16px;
}
.Main-item {
display: flex;
border: 1px solid gray;
margin-bottom: 2px;
align-items:stretch;
height: 50px;
}
.Main-img {
width: 50px;
overflow: hidden;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
.Main-name {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
flex: 1 1;
padding: 0 10px;
}
.Main-buttonWrapper {
width: 146px;
}
.Main-button {
width: 100%;
height: 100%;
}
<div class="Main-element">
<div class="Main-item">
<img class="Main-img" src="https://picsum.photos/200/300" />
<div class="Main-name">Lorem ipsum</div>
<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
</div>
<div class="Main-item">
<img class="Main-img" src="https://picsum.photos/200/300" />
<div class="Main-name">Lorem ipsum</div>
<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
</div>
<div class="Main-item">
<img class="Main-img" src="https://picsum.photos/200/300" />
<div class="Main-name">Lorem ipsum</div>
<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
</div>
<div class="Main-item">
<img class="Main-img" src="https://picsum.photos/200/300" />
<div class="Main-name">Lorem ipsum</div>
<div class="Main-buttonWrapper"><button class="Main-button">button</button></div>
</div>
</div>
A flex item stretches along the container cross axis by default, so the only thing you need to make the button stretch visually as well, is to make the button container a flex container by adding display: flex to .Main-buttonWrapper.