Wondering if anybody else is experiencing the following and either found a solution or may have suggestions.
The code below renders correctly on Chrome (35.0.1916.153), but it does not on Firefox (Firefox 29.0.1):
CSS:
.container {
display: flex;
align-items: center;
width: 200px;
height: 200px;
border: 2px solid red;
overflow: hidden;
}
.container img {
max-width: 100%;
}
HTML:
<div class="container">
<img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png"/>
</div>
A runnable example can be found here:
http://jsfiddle.net/Jc3A3/16/
Add min-width: 1px; to the .container.
https://ntucker.true.io/ntucker/solution-firefox-34-ignoring-max-width-for-flexbox/
try separating the img from your .container
eg:
.container {
--your style here
}
img {
max-width:100%;
}
Related
I cannot seem to achieve a responsive image inside a flex-box item correctly. If the image is one of the flex-box item, it works well (Jsfiddle)
.parent {
display: flex;
width: 100%;
}
.parent input {
flex: 1;
}
.parent input:focus + img {
display: none;
}
<div class="parent">
<img src="https://png.icons8.com/metro/40/000000/graduation-cap.png">
<input />
<img src="https://png.icons8.com/metro/40/00000/user.png">
</div>
When the image is inside a flex item, it starts to misbehave.
Scenario 1: Image stretches distorting the aspect ratio (Jsfiddle)
.parent {
display: flex;
width: 100%;
height: 40px;
}
.parent input {
flex: 1;
}
.parent input:focus + div {
display: none;
}
.parent img {
height: 100%;
max-height: 100%;
width: auto;
}
.parent .funny {
display: flex;
}
<div class="parent">
<img src="https://png.icons8.com/metro/40/000000/graduation-cap.png">
<input />
<div class="funny">
<img src="https://lh3.googleusercontent.com/-OX10v8tUiCY/AAAAAAAAAAI/AAAAAAAADE8/QcezYUDPvxU/s96-c/photo.jpg">
</div>
</div>
Scenario 2: Image leaves empty space (Jsfiddle)
.parent {
display: flex;
width: 100%;
height: 40px;
background: red;
}
.parent input {
flex: 1;
}
.parent input:focus + div {
display: none;
}
.parent img {
height: 100%;
max-height: 100%;
width: auto;
}
.parent .funny {
display: flex;
}
<div class="parent">
<img src="https://png.icons8.com/metro/40/000000/graduation-cap.png">
<input />
<div class="funny">
<div>
<img src="https://lh3.googleusercontent.com/-OX10v8tUiCY/AAAAAAAAAAI/AAAAAAAADE8/QcezYUDPvxU/s96-c/photo.jpg">
</div>
</div>
</div>
Scenario 3: The layout is good until the input receives focus, then verything breaks: Jsfiddle
This happens in IE 11, Chrome (Version 67.0.3396.87 (Official Build) (64-bit)), but haven't tested in Firefox and Edge.
Is there something i haven't studied about Flex-box, or is it a bug?
The below code seems to be working fine for me.
I've just set the image height and width in your first example.
.parent {
display: flex;
width: 100%;
}
.parent input {
flex: 1;
}
.parent input:focus + img {
display: none;
}
img {
height: 40px;
width: auto;
}
<div class="parent">
<img src="https://png.icons8.com/metro/40/000000/graduation-cap.png">
<input />
<img src="https://lh3.googleusercontent.com/-OX10v8tUiCY/AAAAAAAAAAI/AAAAAAAADE8/QcezYUDPvxU/s96-c/photo.jpg">
</div>
For the second example that you shared, again just setting the img height to 40px instead of making it as 100% seems to be working for me. Check the fiddle
Same with scenario 3. Check the fiddle
You have added only one image in <div>.
Check out this fiddle
I have a text inside the div with class message, and I want to move the div to vertical center with respect to parent div with class banner.
Please refer the JsFiddle here - https://jsfiddle.net/1rbhuwfs/
Whenever I try to set margin-bottom, it goes increasing beyond the parent div indefinitely, which I don't understand why. The parent div has display: block on it.
I prefer not to have any position: absolute in my code.
Thanks in advance.
Check below snippet, I have added
.banner > div {
vertical-align:middle;
}
and removed margin-bottom: 40px; form .message.
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: block;
}
.banner > div {
vertical-align:middle;
}
.img-1-holder {
display: inline-block;
margin-left: 15px;
}
.img1 {
height: 70px;
margin-bottom: 15px;
}
.img-2-holder {
display: inline-block;
}
.img2 {
height: 100px;
}
.message {
display: inline-block;
}
<div class="banner">
<div class="img-1-holder">
<img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
</div>
<div class="message">
Some random text here
</div>
<div class="img-2-holder">
<img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
</div>
</div>
Check jsfiddle, put parent to display:table and child to display: table-cell and vertical-align: middle.
https://jsfiddle.net/ggq39acr/
You can refer this too. https://www.w3.org/Style/Examples/007/center.en.html
The solutions suggest in this link works in general ! :D
One way to vertically center without position: absolute or using tables - and respecting your margin-bottom on image and text-div - is to use flexbox:
Add/change this:
.banner {
display: flex;
align-items: center;
}
https://jsfiddle.net/5496yk1k/
you can use flexbox fiddle
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: flex;
justify-content: center;
align-items: center;
}
In this case you can remove the margins on
.img1 {
height: 70px;
}
.message {
display: inline-block;
}
You can try to include a common class suppose img-inline with inline css properties and manage other css properties in your classes .img-1-holder, .img-2-holder and .message
Here is a sample code for you. You can try it in your jsfiddle. Sorry I am not posting fiddle link here.
HTML CODE
<div class="banner">
<div class="img-inline img-1-holder">
<img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
</div>
<div class="img-inline message">
Some random text here
</div>
<div class="img-inline img-2-holder">
<img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
</div>
</div>
CSS CODE:
.banner {
height: 100px;
background-color:#4d1242;
margin: 0 1px;
display: block;
}
.img-1-holder {
margin-left: 15px;
}
.img1 {
height: 70px;
margin-bottom: 15px;
}
.img-2-holder {
margin-left: 15px;
}
.img2 {
height: 100px;
}
.img-inline {
display: inline-block;
vertical-align: middle;
}
Hope this helps :)
I have a img that resizes to the footer height (10vh) with max-height: 100%. In Dev tools the size of each element seems to be OK but somehow the page is overflowing and I can`t figure out where the extra px height comes from.
Here is my code:
* {
margin: 0 !important;
padding: 0 !important;
}
body {
background-color: yellow;
}
.header {
height: 10vh;
background-color: red;
}
.content {
height: 80vh;
background-color: green;
}
.footer {
height: 10vh;
background-color: blue;
}
img {
max-height: 100%;
max-width: 100%;
}
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
<img src="https://pixabay.com/static/uploads/photo/2016/01/19/18/00/city-1150026_960_720.jpg" alt="" />
</div>
Why does this happen and how can I avoid it?
UPDATE: I had no idea that the default display: inline of <img> was causing this. Now that I know it is much easier to find other answers to my question (I just didn`t know what to search for). For those who may be searching for this issue and find my question here is a complete answer: https://stackoverflow.com/a/31445364/6453726
SOLUTION: Add vertical-align: top to the <img>.
Add display:block; to your img selector
img {
max-height: 100%;
max-width: 100%;
display: block;
}
I am working with flex items so I think it could be the problem of why my code is making a strange behaviour.
I have .flexContainer class that has a max-width property. After I resize the window, I want to change this max-width property to a higher value but if I set my media query as:
#media screen and (max-width: 850px){
.flexContainer{
max-width: 60%;
}
}
the max-width of the element is changing at 835px instead of 850px.
Here is my code:
HTML:
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
</div>
<div id="right" class="block">Right</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
}
#container{
display: flex;
height: 100%;
background-color: blue;
}
.block{
flex: 1;
}
#left{
background-color: green;
}
#center{
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
}
#right{
background-color: orange;
}
.flexContainer{
flex: 1;
min-width: 100px;
max-width: 50%;
box-sizing: border-box;
height: 150px;
background-color: red;
padding: 10px;
}
.flexDiv{
width: 100%;
height: 100%;
background-color: yellow;
}
#media screen and (max-width: 850px){
.flexContainer{
max-width: 60%;
}
}
JSFiddle in which you can see that the max-width property changes at 835px instead of 850px.
EDIT: I add two screenshots so you can see it:
Why the media query is being executed after it should?
I found my problem here. Just I had to remove the margin of the body tag.
I will try to reproduce the effect that I am having on my real project (in which I have body tag fixed) and edit the question again.
EDIT: It seems that it was a bug or something similar of Google Chrome because I cannot reproduce the error anymore.
The error that I was getting is that when I looked at html tag on my Google Chrome inspector, it gave to me the wrong values for the webpage (around 30px less, and I do not have any padding/margin around it) so I thought that the media queries were being executed in the wrong width of the screen.
I know this is a "stupid" solution but it worked again when I closed and re-opened Google Chrome. Now it works like normal behaviour.
I'm not sure why this wouldn't work on Chrome or Opera. I don't see anything that would be not compatible with other browser.
Any ideas?
jsFiddle: http://jsfiddle.net/3vugadj6/
<style>
#page_body_table {
display: table;
width: 100%;
vertical-align: center;
}
#page_body_left {
display: table-cell;
max-width: 100%;
}
#page_body_middle {
display: table-cell;
width: 700px;
border: 1px solid black;
}
#page_body_right {
display: table-cell;
max-width: 100%;
}
#media screen and (max-width: 700px) {
#page_body_left, #page_body_right {
display: none;
}
}
</style>
<div>
<center id="page_body_table">
<div id="page_body_left">
</div>
<div id="page_body_middle">
this is content of page
</div>
<div id="page_body_right">
</div>
</center>
</div>
you have to add: table-layout: fixed; to #page_body_table and make it look like this:
#page_body_table {
display: table;
width: 100%;
vertical-align: center;
table-layout: fixed;
}
here's a fiddle.
Exaplanation can be found here.
Long story short: If the layout is auto, instead of fixed, the width is determined by the content of the cells, which in your case is none, so the middle cell is stretched. If it's fixed it distributes the remaining space to the empty cells.