I have the following html :
<div class="main-container">
<h1>A title</h1>
<p>Some text</p>
<div class="sub-container">
<img src="">
</div>
</div>
With the following CSS :
.main-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.sub-container{
flex-grow:2;
background-color: green;
}
Please note that I don't know the size of the container above "main-container". I'm using flex because I want the div in "main-container" to occupy all the remaining space at the bottom.
What I want is to have an image in "sub-container" which fits its parent's size in both directions (height and width). Right now if I add an image into "sub-container" it overflows and doesn't get scaled at all.
I know that flex only works for immediate children (i.e. "sub-container" but not the image inside). I tried to use flex on "sub-container" too, but I couldn't achieve anything satisfactory.
Is this layout you wanted?
Using flex: 1 1 0 to control the sub-container and using width: 100% could make the image to fit the container.
.main-container{
border: 3px solid green;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.sub-container{
flex-grow: 1 1 0;
background-color: green;
display: flex;
}
.sub-container img {
width: 100%;
height: 100%;
}
<div class="main-container">
<h1>A title</h1>
<p>Some text</p>
<div class="sub-container">
<img src="https://picsum.photos/1080/600">
</div>
</div>
You can use this class:
.img-fluid {
max-height:100%;
height:auto;
}
Don't forget to add .img-fluid to your img
Related
I'm trying to create a Flexbox setup comprised of two div elements which are both taking up 50% of the width of the screen equally.
The left side will have some text and the right side will have an image which will only fill the whole of it's 50% of the width, shrinking larger images down if necessary.
What's the best way to achieve this? I'm fairly new to Flexbox.
.content{
position: relative;
display: flex;
width: 100%;
height: 600px;
}
.content div{
flex-direction: column;
justify-content: center;
flex: 1;
}
.text{
background-color: pink;
}
.image{
background-color: paleturquoise;
}
<section class="content">
<div class="text">
<p>text goes here</p>
</div>
<div class="image">
<img src="https://i.imgur.com/rcZLIwH.jpg" alt="image">
</div>
</section>
You can make the .image position: relative and set the width of the image to 100%:
.content{
position: relative;
display: flex;
width: 100%;
height: 600px;
}
.content div{
flex-direction: column;
justify-content: center;
flex: 1;
}
.text{
background-color: pink;
}
.image{
background-color: paleturquoise;
/* make the parent position relative */
position: relative;
}
.image img {
/* make the width of the image equal to the parent width */
width: 100%;
}
<section class="content">
<div class="text">
<p>text goes here</p>
</div>
<div class="image">
<img src="https://i.imgur.com/rcZLIwH.jpg" alt="image">
</div>
</section>
I want to make an image have a max-width 100% of the parent div, where the parent div is a flex element.
But when I give image 100% width, the image overflows the content!
Fiddle:
https://jsfiddle.net/3f8k19g5/1/
<div class="container">
<div class="image">
<img src="https://m.xcite.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/u/buy_apple_imac_21.5_inch_all_in_one_desktop__lowest_price_in_ksa_2.jpg" alt="">
</div>
<div class="text">This is an iMac</div>
</div>
CSS:
.container{
width: 800px;
background-color: red;
display: flex;
}
.image{
background-color: blue;
flex-grow: 2;
max-width: 100%;
}
.text{
background-color: yellow;
flex-grow: 1;
}
I went ahead and updated your code. Run the snippet below.
The image class was being applied to the parent div, I instead moved it to the img tag so the image take 100% of the container div.
.container{
width: 800px;
background-color: red;
display: flex;
}
.image{
background-color: blue;
flex-grow: 2;
max-width: 100%;
width: 100%;
}
.text{
background-color: yellow;
flex-grow: 1;
}
<div class="container">
<!= Feel free to remove the empty div around the image tag if you arent using it ->
<div>
<img class="image" src="https://m.xcite.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/u/buy_apple_imac_21.5_inch_all_in_one_desktop__lowest_price_in_ksa_2.jpg" alt="">
</div>
<div class="text">This is an iMac</div>
</div>
I'm trying to build a flexible layout that should adapt to different screen sizes as the following pictures show.
It's basically two div rows, occupying each 50% of the vertical size of the screen.
Top div is a container to hold pictures and bottom div will display a leaflet map.
I'd like the Image div to keep aspect ratio so image is not deformed, ans Map div to adapt horizontally.
So far, my code is basic and looks like this :
<div id="container">
<div id="Top div">
<div id='image'>Image</div>
</div>
<div id="Bottom div">
<div id='map'>Map</div>
</div>
</div>
Any idea of the CSS style I should add to each div to achieve this layout ?
Image layout desktop
Image layout smartphone
You could use Flexbox to achieve this layout. Refer to my CSS below and check out the attached Codepen.
#container {
display: flex;
flex-flow: row wrap;
}
#Top {
display: flex;
flex: 1 1 100%;
padding-bottom: 1rem;
}
#image {
flex: 0 1 50%;
margin: auto;
padding: 3rem;
background-color: #ccc;
text-align: center;
}
#Bottom {
flex: 1 1 100%;
}
#map {
padding: 5rem;
background-color: green;
text-align: center;
}
If, for some reason you cannot use flexbox you can achieve this easily. The main trick is to add an element to act as a wrapper to the image, set a height/width to this element and then set the max-width/max-height on the image to 100%. This way it will scale without deforming.
To achieve occupying each 50% of the vertical size of the screen you can set the height to 50vh.
#map {
background-color: green;
height: 100%;
}
.section {
height: 50vh;
}
.img-container {
width: 100%;
text-align: center;
}
.sample-img {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<div id="Top div" class="section img-container">
<img class="sample-img" src="https://via.placeholder.com/180" alt="image" />
</div>
<div id="Bottom div" class="section">
<div id='map'>Map</div>
</div>
</div>
How do I set a div as scrollable (absolute) without fixed height filling entire view, while inside a flex-box?
(https://imgur.com/7v5OFas)
(typo at the right section, its fixed width, the only height expected is to be fullpage everything)
https://codepen.io/anon/pen/oJyOOp?editors=1000
(if I add height to the relative parent of the red section, it works, but I cant have a fixed height. Adding 100% from html to the relative parent also works, but I can't also do that.)
currently it goes:
<div style="display:flex">
<div style="flex-grow:1">
<div style="display:flex">
<div style="width:45px...">
....
</div>
<div ...header code>
....
</div>
<div style="flex-grow:1; top:70px; position: relative">
<div style="position: absolute; top:0; left:0; right:0; bottom: 0; overflow: auto>
</div>
</div>
</div>
</div>
<div style="width:45px...">
....
</div>
</div>
It ends up filling the header height.
I would drop the idea of absolute content if its not necesarry and try something similiar to:
html, body {
min-height: 100%;
height: 100%;
margin: 0;
}
.container{
background: blue;
display: flex;
height: 100%;
flex-flow: row;
}
.sidebar{
background: red;
height: 100%;
width: 200px;
}
.contentWrapper{
display: flex;
flex-flow: column;
flex: 1;
}
.header {
background: yellow;
height: 100px;
width: 100%;
}
.content {
flex: 1;
overflow: auto;
}
.scrollableContent {
height: 3000px;
}
<div class="container">
<div class="sidebar"></div>
<div class="contentWrapper">
<div class="header"></div>
<div class="content">
<div class="scrollableContent">
</div>
</div>
</div>
</div>
Where you basically make every container a flex and the non scalable part of its content will have fix width/height and the other part get flex: 1 which is shorthand for taking rest of the space.
I have an image with a height larger than that of it's container. The image is set to max-height: 100% and max-width: 100% but it continues to grow beyond it's containing element (in height - surprisingly not in width)
How do I prevent it from expanding beyond it's container while keeping it's aspect ratio?
An example is available at http://codepen.io/navarr/pen/zxZjjP, and the code at that example:
The HTML:
.row {
display: flex;
.col {
display: block;
border: 1px solid blue;
width: 50px;
height: 400px;
flex-grow: 1;
display: flex;
flex-direction: column;
text-align: center;
.link {
flex: 1 1 auto;
img {
max-height: 100%;
max-width: 100%;
}
}
h3 {
flex: 0 0 auto;
background: green;
}
}
}
<div class="row">
<div class="col">
<div class="link">
<img src="http://i.imgur.com/qG6NmU7.png" />
</div>
<h3>100 x 800 image</h3>
</div>
<div class="col">
<div class="link">
<img src="http://i.imgur.com/EjltysP.png" />
</div>
<h3>800 x 100 image</h3>
</div>
<div class="col">
<div class="link">
<img src="http://i.imgur.com/zJlunbp.jpg" />
</div>
<h3>800 x 100 image</h3>
</div>
<div class="col"></div>
</div>
The first box illustrates the problem: the image expanding beyond it's containing element.
The second and third box show this not being a problem as long as the image is wider than it is tall.
Add height: 100%; to the parent of the image :
.link {
flex: 1 1 auto;
height: 100%;
img {
max-height: 100%;
max-width: 100%;
}
}
demo
Set width and height to .link in css.
Check edited codepen http://codepen.io/anon/pen/azJGrK
CSS
.link {
flex: 1 1 auto;
width: 100%;
height: 80%;
img {
max-height: 100%;
max-width: 100%;
}
Replace the img tag with a div and set the image as the background image, and add this to the styling:
Background-size:contain;
This will allow the image to maintain its aspect ratio but fill the entire space of the div as much as possible.
You can also try background-size:cover; and see which one fits your needs better.
Remember, you need to include the height and width of the div when using background images.
Using the same mentality as found in the answer here, you can try setting this on the image parent:
height: 0;
min-height: 100%;
And on the img itself, set:
height: 100%;