I’m trying to display an image centered and resized by CSS (max-width / max-height, flex).
This is working fine in Chrome but not in Firefox. What’s wrong?
a {
border: 1px solid red;
display: flex;
height: 100px;
width: 100px;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 5px;
}
img {
max-width: 100%;
max-height: 100%;
border: 1px solid green;
}
<a class="frame">
<img src="http://placehold.it/500x150"/>
</a>
See: http://jsfiddle.net/ymLb50w0/2/
Try this solution...
a {
border: 1px solid red;
display: inline-block;
height: 100px;
width: 100px;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 5px;
max-width: 100%;
}
img {
max-width: 100%;
max-height: 100%;
border: 1px solid green;
}
<body style="text-align: center;">
<a class="frame">
<img src="http://placehold.it/500x150"/>
</a>
</body>
You may try to align it vertically like it's explained here
Horizontal alignment shouldn't be a problem
Related
I've searched and tried a lot of solutions but none of them is working for my case.
I have this set up where neither body nor main should change. Inside them I can add as many divs as I want and change any style.
<div class="body">
<div class="main">
<div class="should-be-full-height">
Content
</div>
</div>
</div>
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
}
https://jsfiddle.net/eqwu3yfh/
I added background colors and borders just to see better what's going on.
I need the div with the .should-be-full-height class to use 100% of the height of its parent (.main). How can I achieve that?
Thanks. Sorry if this has been asked, I couldn't find an answer.
You either remove flex-direction: column from body and you can use height:100%
.body {
display: flex;
/* flex-direction: column;*/
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
height: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
Or you change the display of main to be flex and use width: 100%
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: flex;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
width: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
I know you said you cannot change body and main but I don't see any other solution.
Well the code is
.all-card{
width: 100%;
height: 100%;
background-color: red;
}
.left-panel-child{
display: flex;
box-sizing: border-box;
justify-content: flex-start;
align-items: center;
height: 70px;
width: 100%;
margin-top: 1px;
background-color: darkblue;
border:white solid;
color: white;
cursor: pointer;
border-width: 0.1px 0 0 0;
}
.left-panel-child:hover{
border-left:white solid;
}
<div class="all-card">
<div class="left-panel">
<div class="left-panel-child"><span>hello</span></div>
</div>
</div>
My problem is that the left border that appears after`: hover' moves the text away from itself
I ve tried position:absolute with relative
add a transparent border to the initial element
.all-card{
width: 100%;
height: 100%;
background-color: red;
}
.left-panel-child{
display: flex;
box-sizing: border-box;
justify-content: flex-start;
align-items: center;
height: 70px;
width: 100%;
margin-top: 1px;
background-color: darkblue;
border:white solid;
color: white;
cursor: pointer;
border-width: 0.1px 0 0 0;
border-left:transparent solid;
}
.left-panel-child:hover{
border-left:white solid;
}
<div class="all-card">
<div class="left-panel">
<div class="left-panel-child"><span>hello</span></div>
</div>
</div>
is causing by the white border when mouse is on the div because you're turning the div's border to white which is the same color as the background one means that the border will look like is pushing somehow but not just remove border-left:white solid; or change the color to see the difference
.all-card {
width: 100%;
height: 100%;
background-color: red;
}
.left-panel-child {
display: flex;
box-sizing: border-box;
justify-content: flex-start;
align-items: center;
height: 70px;
width: 100%;
margin-top: 1px;
background-color: darkblue;
border: solid white;
color: white;
cursor: pointer;
border-width: 0.1px 0 0 0;
}
.left-panel-child:hover {
/*border-left:white solid;*/
}
<div class="all-card">
<div class="left-panel">
<div class="left-panel-child"><span>hello</span></div>
</div>
</div>
I'm really new to flexbox and I'm trying to understand why my flexbox won't wrap when the browser window width gets smaller. The row never turns into a column. why is that? I appreciate any help?
stackblitz
.listingBody {
min-height: 100vh;
}
.listingCard {
width: 800px;
height: 400px;
border-width: 2px;
border-style: solid;
display: flex;
flex-flow: row wrap;
border-radius: 25px;
background: white;
margin: 0 auto;
justify-content: center;
align-items: center;
box-shadow: 10px 10px 5px -2px #888;
}
.image {
width: 200px;
height: 200px;
background-color: red;
}
.rules {
width: 200px;
height: 200px;
background-color: green;
}
.info {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="listingBody">
<div class="listingCard">
<div class="image">
test
</div>
<div class="info">
test
</div>
<div class="rules">
test
</div>
</div>
</div>
It won't wrap because you set a fixed width to the parent div. You can either just use max-width or remove it altogether.
.listingBody {
min-height: 100vh;
}
.listingCard {
height: 400px;
border-width: 2px;
border-style: solid;
display: flex;
flex-flow: row wrap;
border-radius: 25px;
background: white;
margin: 0 auto;
justify-content: center;
align-items: center;
box-shadow: 10px 10px 5px -2px #888;
}
.image {
width: 200px;
height: 200px;
background-color: red;
}
.rules {
width: 200px;
height: 200px;
background-color: green;
}
.info {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="listingBody">
<div class="listingCard">
<div class="image">
test
</div>
<div class="info">
test
</div>
<div class="rules">
test
</div>
</div>
</div>
This happens because you are setting a fixed with to the container div without a max width. You can just change the .listingCard style to this:
.listingCard {
width: 800px;
max-width: 100%; /* <-- add this */
height: 400px;
border-width: 2px;
border-style: solid;
display: flex;
flex-flow: row wrap;
border-radius: 25px;
background: white;
margin: 0 auto;
justify-content: center;
align-items: center;
box-shadow: 10px 10px 5px -2px #888;
}
Or just replace width: 800px and max-width: 100% with max-width: 800px which will provide the same effect.
By doing it like this it the content will have a max width of 800px in case the window is larger than 800px or adjust to the window size in case it is resized to a lower width.
The flex items are not wrapping because you have a width set on the flexbox container, so narrowing the browser window smaller than that won't change the size of the flexbox container and therefore the flex items will have no reason to wrap.
Try replacing width: 800px; on .listingCard with max-width: 800px;
.main-content{
height: 100%;
width: 60%;
min-height: 800px;
background-color: white;
border-radius: 5px;
margin-left: 1%;
border: solid 1px black;
}
.profile-banner{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 7vw;
margin-top: 7%;
background-color: rgba(71, 135, 195, 0.5);
}
.profile-avatar{
width: 18%;
margin-right: 3%;
img{
width: 100%;
border: solid white 2px;
}
}
.profile-username{
margin-left: 5%;
font-size: 4vw;
color: $font-blue;
font-family: 'Titillium Web', sans-serif;
-webkit-text-stroke: 1px white;
}
.profile-second-sec{
margin-top: 8%;
height: 20vw;
background-color: blue;
}
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: grey;
overflow-x: scroll;
white-space: nowrap
}
.profile-image-container{
display: flex;
align-items: center;
}
<div class="main-content">
<div class="tab-header font-large">
<i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
<div class="profile-username">
User profile
</div>
<div class="profile-avatar">
Avatar image
</div>
</div>
<div class="profile-second-sec">
</div>
<div class="profile-third-sec">
>> This is where the images go <<
</div>
</div>
EDIT: added in code snippit, Hope it helps
I trying to create a horizontal scroll div but when i add the content images all it does is squeeze all the images inside of it like so,
So its resizing the images to fit in but i would like them to be normal size and be able to scroll.
Now i tried to add overflow scroll but its not having that effect
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: $font-grey;
overflow-x: scroll;
}
.profile-image-container{
display: flex;
align-items: center;
}
Now i thought i knew enough on this to be able to do but obviously not! So any ideas will be appreciated.
Thanks
You can remove the flexbox rules. Then provide the image with some properties. Using white-space and overflow should work for you.
example:
.main-content {
height: 100%;
width: 60%;
min-height: 800px;
background-color: white;
border-radius: 5px;
margin-left: 1%;
border: solid 1px black;
}
.profile-banner {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 7vw;
margin-top: 7%;
background-color: rgba(71, 135, 195, 0.5);
}
.profile-avatar {
width: 18%;
margin-right: 3%;
img {
width: 100%;
border: solid white 2px;
}
}
.profile-username {
margin-left: 5%;
font-size: 4vw;
color: $font-blue;
font-family: 'Titillium Web', sans-serif;
-webkit-text-stroke: 1px white;
}
.profile-second-sec {
margin-top: 8%;
height: 20vw;
background-color: blue;
}
.profile-third-sec {
margin-top: 8%;
height: 30vw;
background-color: grey;
overflow-x: scroll;
white-space: nowrap
}
.prgile-third-sec img {
display: block;
width: 100%;
height: auto;
}
.profile-image-container {
display: flex;
align-items: center;
}
<div class="main-content">
<div class="tab-header font-large">
<i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
<div class="profile-username">
User profile
</div>
<div class="profile-avatar">
Avatar image
</div>
</div>
<div class="profile-second-sec">
</div>
<div class="profile-third-sec">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300"></div>
</div>
Flex have default wrap property, you can try on your code based on following stylesheet.
.className {
display: flex;
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.class {
display: flex;
flex-wrap: nowrap;
}
Im copying this Gensis Theme for CSS practice: http://my.studiopress.com/themes/daily-dish/#demo-full
I am now having an issue, since one of the black boxes exceeds its parent-Box.
The attribute causing this is the following code
.heading{
padding-left: 2em;
however I want this padding. How do I make the black background stop at the end of the parent box(id='right_1') and maintain the left padding?
*You have to scroll to the right when you run the snippet to see the issue
*{
margin: 0 auto;
}
body{
margin: 0 auto;
background-image: url('background.png');
}
.heading{
padding-left: 2em;
border: 1px solid green;
font-size: 1em;
display: flex;
width: 100%;
align-items: center;
color: white;
background-color: black;
height: 40px;
}
header{
padding: 70px;
display: flex;
flex-direction: column;
align-items: center;
}
#wrapper{
border: 1px solid lightgrey;
padding-left: 40px;
padding-right: 40px;
margin: auto;
width: 960px;
height: 2000px;
background: white;
}
main{
display: flex;
border: 1px solid red;
}
.blackbox{
}
#left {
width: 100%;
display: flex;
height: 1000px;
border: 1px solid black;
}
#left_1{
display: flex;
width: 100%;
}
#right {
margin-left: 5%;
width: 30%;
display: flex;
border: 1px solid black;
}
#right_1{
width: 100%;
}
<main>
<section id='left'>
<section id='left_1'>
<h2 class='heading'>Featured Dish</h2>
</section>
</section>
<aside id='right'>
<aside id='right_1'>
<h2 class='heading'>About the Author</h2>
</aside>
</aside>
</main>
</div>
You can add box-sizing:border-box to the .heading element.
This way the width and height properties include the padding.
CSS would be:
.heading {
padding-left: 2em;
border: 1px solid green;
font-size: 1em;
display: flex;
width: 100%;
align-items: center;
color: white;
background-color: black;
height: 40px;
box-sizing: border-box; // Add box-sizing: border-box
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
Hope this helps :)
You can solve this issue making box-sizing: border-box;
Try below CSS
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
JSFIDDLE DEMO
Read more about box-sizing