How to fit a image which size is defined by % in non-static size div? Here is what i did for this moment, photo is commented, to show you how layout look like when it is looking like i want, if you uncomment photo, whole layout will be broken. I want all units to be same type, or similar, and just find the way to fit this photo in div without destroying whole layout.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
}
/* == WHOLE PAGE ==*/
.landing{
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
}
/* HEADER */
.header{
background: #F582A7;
flex: 0 1 10%;
display: flex;
justify-content: center;
align-items: center;
}
.header > ul{
display: flex;
flex-direction: row;
list-style: none;
}
.header > ul > li{
padding: 0 10px 0 10px;
}
/* CONTENT */
.mainContent{
background: #F10086;
flex: 1 1 auto;
display: flex;
flex-flow: column-reverse;
}
.bottomContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.topContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
}
.topContent > img{
max-height: 100%;
max-width: 100%;
}
/* TABS */
.tabs{
background: #711A75;
flex: 0 1 18%;
display: flex;
justify-content: space-around;
align-items: center;
}
.tab{
height: 80%;
width: 30%;
background: #180A0A;
border-radius: 15px;
}
</style>
</head>
<body>
<div >
<div >
<ul>
<li>Test 0</li>
<li>Test 0</li>
<li>Test 0</li>
</ul>
</div>
<div >
<div >
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
</div>
<div >
<!--<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png" alt="circle">-->
</div>
</div>
<div >
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
</body>
</html>CodePudding user response：
To cover whole width of the page, use object-fit (the image height is specified is arbitrary units, em in this example.
That answer does it without object-fit, but uses the image as a background instead. That can be used when the image is just “decorational” – you can't have alt text on it etc.
Both variants are used in very similar way.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
}
/* == WHOLE PAGE ==*/
.landing{
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
}
/* HEADER */
.header{
background: #F582A7;
flex: 0 1 10%;
display: flex;
justify-content: center;
align-items: center;
}
.header > ul{
display: flex;
flex-direction: row;
list-style: none;
}
.header > ul > li{
padding: 0 10px 0 10px;
}
/* CONTENT */
.mainContent{
background: #F10086;
flex: 1 1 auto;
display: flex;
flex-flow: column-reverse;
}
.bottomContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.topContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
}
.topContent > img{
max-height: 100%;
max-width: 100%;
}
/* TABS */
.tabs{
background: #711A75;
flex: 0 1 18%;
display: flex;
justify-content: space-around;
align-items: center;
}
.tab{
height: 80%;
width: 30%;
background: #180A0A;
border-radius: 15px;
}
</style>
</head>
<body>
<div >
<div >
<ul>
<li>Test 0</li>
<li>Test 0</li>
<li>Test 0</li>
</ul>
</div>
<div >
<div >
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
</div>
<div >
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png" alt="circle" style="object-fit: cover; height: 10em; width: 100%">
</div>
</div>
<div >
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
</body>
</html>CodePudding user response：
Rather than use an image tag, you may want insert the image as a background using CSS. Then you can set the background-size property to something appropriate like contain or cover.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
}
/* == WHOLE PAGE ==*/
.landing{
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
}
/* HEADER */
.header{
background: #F582A7;
flex: 0 1 10%;
display: flex;
justify-content: center;
align-items: center;
}
.header > ul{
display: flex;
flex-direction: row;
list-style: none;
}
.header > ul > li{
padding: 0 10px 0 10px;
}
/* CONTENT */
.mainContent{
background: #F10086;
flex: 1 1 auto;
display: flex;
flex-flow: column-reverse;
}
.bottomContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.topContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png');
background-repeat: no-repeat;
background-size: contain;
}
.topContent > img{
max-height: 100%;
max-width: 100%;
}
/* TABS */
.tabs{
background: #711A75;
flex: 0 1 18%;
display: flex;
justify-content: space-around;
align-items: center;
}
.tab{
height: 80%;
width: 30%;
background: #180A0A;
border-radius: 15px;
}
</style>
</head>
<body>
<div >
<div >
<ul>
<li>Test 0</li>
<li>Test 0</li>
<li>Test 0</li>
</ul>
</div>
<div >
<div >
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
</div>
<div >
</div>
</div>
<div >
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
</body>
</html>