What the .image element needs to do is adjust dynamically to both vertical and horizontal browser resizing. The .link element must also surround only the .image element (i.e., height: 100% cannot be used on the .link element).
The problem is that both the .link and .image elements extend beyond the bottom of the .container when the height of .image exceeds the height of .container.
* {
box-sizing: border-box;
}
.component {
margin: auto;
width: 50%;
height: 0;
min-height: calc(100vh / 3);
background-color: blue;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: green;
}
.link {
width: 480px;
max-width: 100%;
max-height: 100%;
padding: 0.25rem;
background-color: red;
}
.image {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
background-color: grey;
}
<body>
<div class='component'>
<div class='container'>
<a href='#' class='link'>
<img src='https://via.placeholder.com/150' class='image' />
</a>
</div>
</div>
</body>
I hope this is what you are looking for
* {
box-sizing: border-box;
}
.component {
margin: auto;
width: 50%;
height: auto;
min-height: calc(100vh / 3);
background-color: blue;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: green;
}
.link {
width: 480px;
max-width: 100%;
height: calc(100vh / 3);
padding: 0.25rem;
background-color: red;
}
.image {
display: block;
background-color: grey;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="component">
<div class="container">
<a href="#" class="link">
<img
src="https://empresas.blogthinkbig.com/wp-content/uploads/2019/11/Imagen3-245003649.jpg"
class="image"
/>
</a>
</div>
</div>
How about you use display:flex on .link ?
* {
box-sizing: border-box;
}
.component {
margin: auto;
width: 50%;
height: 0;
min-height: calc(100vh / 3);
background-color: blue;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: green;
}
.link {
width: auto;
max-width: 100%;
max-height: 100%;
padding: 0.25rem;
background-color: red;
display: flex /*Add this*/
}
.image {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
background-color: grey;
}
<body>
<div class='component'>
<div class='container'>
<a href='#' class='link'>
<img src='https://via.placeholder.com/150' class='image' />
</a>
</div>
</div>
</body>
Related
Hello everyone, I'm trying to setup the main content of the homepage as shown in the image but can't really figure a few things.
Somehow everything I try results in the image to overflow the container and be as big as the page. I don't want to set a fixed size for the image, but rather have it proportional to the view height and width
This is my code right now:
<section class="main">
<div class="main-left">
<div class="container">
<img src="assets/images/wine.png">
</div>
</div>
<div class="main-right">
<div class="container">
<img src="assets/images/oil.png">
</div>
</div>
</section>
.main {
display: flex;
background-color: #f1eee9;
height: 100%;
}
.main-left, .main-right {
display: flex;
flex-direction: row;
}
.main-left {
background-color: #111;
width: 50%;
}
.main-right {
background-color: #1f1f1f;
width: 50%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 80vw;
height: 80vw;
}
.container img {
display: block;
width: 100%;
height: 100%;
}
I haven't yet added the text so it would be REALLY helpful if you could suggest how to do that as well..
You should use : object-fit: cover;
which is documented here : https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
With your exemple I made that (changed container height to 80vh and not vw)
.main-left, .main-right {
display: flex;
flex-direction: row;
}
.main-left {
background-color: #111;
width: 50%;
}
.main-right {
background-color: #1f1f1f;
width: 50%;
}
.container {
width: 80vw;
height: 80vh;
background-color: blue;
}
.container img {
display: block;
width: 100%;
height: 100%
object-fit: cover;
}
You can optimize your code like below it got correct:
<section class="main">
<div class="main-left">
<img src="assets/images/wine.png">
</div>
<div class="main-right">
<img src="assets/images/oil.png">
</div>
</section>
.main {
display: flex;
flex-direction: row;
}
.main-left , .main-right{
flex: 1;
}
.main-left {
background-color: #111;
}
.main-right {
background-color: #1f1f1f;
}
.main > div img {
display: block;
width: 100%;
height: 100%
object-fit: cover;
}
I have 2 parent containers in my code below. The first one is just for reference for what I want my second container to look like. The difference between the two is the first one I used absolute positioning and flex display but the second one is grid display. What I'm stuck on is understanding how to center class .item1 and position class .item2 all the way to the right just how it's like on the first parent container i.e class .topAdCon. My specific questions are 1) how to center .item1
2) how to set .item2's position all the way to the right (right: 0%)
3) on the first parent container I just set top: 0% to align it all the way to the top because it has absolute positioning how can I set the positioning of the second parent container where ever I want currently I'm using margin-top for top positioning is that the way to go or what is the right way?
4) Lastly how do I set the height for the second container because height isn't responding as it does on the first container?
Note: I commented out things I tried in order to achieve these things but they aren't working.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.topAdCon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0%;
width: 100%;
height: 18%;
background-color: pink;
}
.topAdCon .adCon {
width: 40%;
height: 100%;
}
.topAdCon .adCon img {
width: 100%;
height: 100%;
}
.topAdCon .sideInfo {
display: flex;
text-align: center;
width: 17%;
height: 100%;
position: absolute;
right: 0%;
border: 1.5px solid #000000;
}
.topAdCon .sideInfo p {
font-size: 0.9vw;
margin: auto;
}
.wrapper {
display: grid;
align-items: center;
justify-content: center;
/*position: relative;
top: 20%;*/
margin-top: 20%;
grid-template-columns: 40% 17%;
width: 100%;
height: 18%;
/*height not responding*/
background-color: gold;
}
.item1 {
/*align-self: center;*/
width: 100%;
height: 100%;
}
.item1 img {
width: 100%;
height: 100%;
}
.item2 {
display: flex;
text-align: center;
/*align-self: flex-end*/
width: 100%;
height: 100%;
border: 1.5px solid #000000;
}
.item2 p {
font-size: 1.5vw;
margin: auto;
}
<div class="topAdCon">
<div class="adCon">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="sideInfo">
<p>this is test statement 1</p>
</div>
</div>
<div class="wrapper">
<div class="item1">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="item2">
<p>this is test statement 2</p>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.topAdCon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0%;
width: 100%;
height: 18%;
background-color: pink;
}
.topAdCon .adCon {
width: 40%;
height: 100%;
}
.topAdCon .adCon img {
width: 100%;
height: 100%;
}
.topAdCon .sideInfo {
display: flex;
text-align: center;
width: 17%;
height: 100%;
position: absolute;
right: 0%;
border: 1.5px solid #000000;
}
.topAdCon .sideInfo p {
font-size: 0.9vw;
margin: auto;
}
.wrapper {
display: grid;
margin-top: 20%;
grid-template-columns: 30% 40% 12% 18%;
grid-template-areas: 'item item1 item2 item3';
width: 100%;
height: 18vh;
background-color: gold;
}
.item1 {
width: 100%;
height: inherit;
}
.item1 img {
width: 100%;
height: 100%;
}
.item3 {
display: flex;
text-align: center;
justify-content: end;
width: 100%;
height: inherit;
border: 1.5px solid #000000;
}
.item3 p {
font-size: 1.5vw;
margin: auto;
}
<div class="topAdCon">
<div class="adCon">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="sideInfo">
<p>this is test statement 1</p>
</div>
</div>
<div class="wrapper">
<div class="item"></div>
<div class="item1">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="item2"></div>
<div class="item3">
<p>this is test statement 2</p>
</div>
</div>
I am trying to create a modal that has a footer and an header. The content has two columns: LeftSection and RightSection. I want to have the second column fill the height of the content depending on what the first columns height is (which can differ based on content). From the snippet, this means to have the black div go down as much as the red one does.
.Container {
margin: auto auto;
width: 80vw;
height: 250px;
background-color: #8080801a;
flex: 1;
display: flex;
flex-direction: column;
}
.Header {
height: 50px;
width: 100%;
background-color: #61dafb;
}
.FlexContainer {
flex: 1;
display: flex;
overflow: auto;
}
.LeftSection {
width: 200px;
height: 400px;
background: red;
}
.RightSection {
width: 100%;
background-color: black;
}
.Footer {
height: 50px;
background-color: blue;
width: 100%;
}
<div class="Container">
<div class="Header"></div>
<div class="FlexContainer">
<div class="LeftSection" ></div>
<div class='RightSection' ></div>
</div>
<div class='Footer' />
</div>
Do you want this?
.Container {
margin: auto auto;
width: 80vw;
height: 250px;
background-color: #8080801a;
flex: 1;
display: flex;
flex-direction: column;
}
.Header {
height: 50px;
width: 100%;
background-color: #61dafb;
}
.FlexContainer {
flex: 1;
display: flex;
overflow: auto;
}
.LeftSection {
width: 200px;
height: 400px;
background: red;
position: sticky;
top: 0;
}
.RightSection {
width: 100%;
background-color: black;
position: sticky;
top: 0;
}
.Footer {
height: 50px;
background-color: blue;
width: 100%;
}
<div class="Container">
<div class="Header"></div>
<div class="FlexContainer">
<div class="LeftSection" ></div>
<div class='RightSection' ></div>
</div>
<div class='Footer' />
</div>
I have following html:
<div class='fullHeight'>
<div class='flexbox'>
<div class='first'>
<p>foo</p>
</div>
<div class='second'>
<p>bar</p>
<img src='http://www.mandysam.com/img/random.jpg'>
</div>
</div>
</div>
and css:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.fullHeight {
height: 100vh;
background-color: red;
}
.flexbox {
display: flex;
flex-direction: column;
height: 100%;
maxHeight: 100%;
width: 100%;
background-color: green;
}
.first {
background-color: magenta;
}
.second {
background-color: yellow;
flex: 1 1 auto;
max-height: 100%;
height: 100%;
widht: auto;
}
As long there is no image, everything works fine:
But as soon as a picture comes in, it overflows the container, instead of being shrinked to fit available height:
Codepen
You missed
display: flex;
flex-direction: column;
in your .second class, that's why the flex property isn't doing anything. Also it should be max-height instead of maxHeight and width instead of widht.
You can use background-image for your purpose.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.fullHeight {
height: 100vh;
background-color: red;
}
.flexbox {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-color: green;
}
.first {
background-color: magenta;
}
.second {
background-color: yellow;
display: flex;
flex-grow: 1;
flex-direction: column;
}
.container {
background-color: green;
flex-grow: 1;
background-image: url('http://www.mandysam.com/img/random.jpg');
background-size: contain;
background-repeat: no-repeat;
}
<div class='fullHeight'>
<div class='flexbox'>
<div class='first'>
<p>foo</p>
</div>
<div class='second'>
<p>bar</p>
<div class="container">
</div>
</div>
</div>
</div>
Add height and width properties to your image. Or just height. Maybe also object-fit: cover;
.second img {
height: 100%;
width: 100%;
object-fit: cover;
}
Using positions is the other solution but it's very risky and it depends on your plan for future code in this project!!
.second {
background-color: yellow;
flex: 1 1 auto;
max-height: 100%;
height: 100%;
widht: auto;
position:relative
}
.second img{
height: 95%;
width: 100%;
position:absolute;
bottom:0;
right:0;
}
I have a simple modal on my page, when I resize the browser it adjusts to its size, the problem is when the browsers say 'height' is over the modal element, the top bit seems to 'go out' of the browser, so essentially you cant see that bit part..
I experimented with setting the overflow and max-height on my #content-container and #wrapper but Its completely ineffective, what am I doing wrong?
jsfiddle: https://jsfiddle.net/kmav8ox7/
HTML:
<div id="content-container">
<div id="wrapper">
<ul id="flex-container">
<li class="flex-item">
<div id="list-area"></div>
</li>
<li class="flex-item">
<div id="img-desc-container">
<div class="image-area">
<img src="http://dukes-lancaster.org/wp-content/uploads/2014/11/placeholder.jpg">
</div>
<div class="description-area"></div>
</div>
</li>
</ul>
</div>
</div>
CSS:
/* center content */
#content-container {
width: 50%;
height: 50%;
border: 3px solid red;
/* positioning */
margin-top: 50vh;
margin-left: 50vw;
transform: translate(-50%, -50%);
max-height: 100%;
}
/* wrapp content */
#wrapper {
width: 100%;
height: 100%;
max-height: 100%;
margin: 0;
/*Centering content*/
display: inline-flex;
justify-content: center;
align-items: content;
}
#img-desc-container {
display: flex;
flex-direction: column;
}
/* MULTI ELEMENT */
.image-area,
.description-area {
width: 200px;
height: 125px;
border: 1px solid black;
}
.image-area,
.description-area,
#list-area {
box-sizing: border-box;
margin: 10px;
}
/* LIST AREA */
#list-area {
width: 200px;
height: 250px;
border: 1px solid black;
background-color: #22AED1;
float: left;
}
/* IMG AREA */
.image-area {
background-color: #016FB9;
}
.image-area img {
width: 100%;
height: 100%;
}
/* DESC AREA */
.description-area {
background-color: #AFA98D;
height: 105px;
}
/*FLEX CONTAINER */
#flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
This may help you.
You need to change some css of #content-container. change translate(-50%, 50%) to translate(-50%, 0%) and remove margin-top
/* center content */
body {
display: flex;
align-items: center;
min-height: 100vh;
}
#content-container {
width: 50%;
height: 50%;
border: 3px solid red;
margin-left: 50vw;
transform: translate(-50%, 0%);
}
/* wrapp content */
#wrapper {
width: 100%;
height: 100%;
margin: 0;
/*Centering content*/
display: inline-flex;
justify-content: center;
align-items: content;
}
#img-desc-container {
display: flex;
flex-direction: column;
}
/* MULTI ELEMENT */
.image-area,
.description-area {
width: 200px;
height: 125px;
border: 1px solid black;
}
.image-area,
.description-area,
#list-area {
box-sizing: border-box;
margin: 10px;
}
/* LIST AREA */
#list-area {
width: 200px;
height: 250px;
border: 1px solid black;
background-color: #22AED1;
float: left;
}
/* IMG AREA */
.image-area {
background-color: #016FB9;
}
.image-area img {
width: 100%;
height: 100%;
}
/* DESC AREA */
.description-area {
background-color: #AFA98D;
height: 105px;
}
/*FLEX CONTAINER */
#flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
<div id="content-container">
<div id="wrapper">
<ul id="flex-container">
<li class="flex-item">
<div id="list-area"></div>
</li>
<li class="flex-item">
<div id="img-desc-container">
<div class="image-area">
<img src="http://dukes-lancaster.org/wp-content/uploads/2014/11/placeholder.jpg">
</div>
<div class="description-area"></div>
</div>
</li>
</ul>
</div>
</div>
I think you can use this css code for solution.
#content-container {
width: 50%;
height: 50%;
border: 3px solid red;
margin-top: 0;
margin-left: 50vw;
transform: translate(-50%, 0%);
}
#wrapper {
width: 100%;
height: 94vh;
margin: 0;
display: inline-flex;
justify-content: center;
align-items: content;
overflow: auto;
}
In order to make it Responsive, You must avoid using Pixels to provide height or width.
U can Give Height in Percentage (for eg. 100% for maximum), then it will never get out of the page