.box1, .box2 {
display: flex;
}
img {
height: 200px;
width: 100%;
}
.box2 .left, .box1 .right, .box2 .right, .box1 .left {
width: 100%
}
.box2 .left {
padding: 25px 10px 25px 75px
}
.box1 .right {
padding: 25px 75px 25px 10px
}
<div class="container">
<div class="box1">
<div class="left"><img src="https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg" alt=""></div>
<div class="right">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.
Reprehenderit sapiente numquam totam possimus necessitatibus. Enim nostrum rem quasi voluptates. Consectetur, est aliquid. Iste voluptas laborum provident harum! Ipsam pariatur velit iste quam, dolorum inventore rem molestias modi nemo?
</div>
</div>
<div class="box2">
<div class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.
Reprehenderit sapiente numquam totam possimus necessitatibus. Enim nostrum rem quasi voluptates. Consectetur, est aliquid. Iste voluptas laborum provident harum! Ipsam pariatur velit iste quam, dolorum inventore rem molestias modi nemo?
</div>
<div class="right"><img src="https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg" alt=""></div>
</div>
</div>
I want to achieve to change this and to get both images connected with their corners, like this:
How to achieve the result from image? Also, i want to keep the paddings of the text.
Was it necessary? The indents are preserved. In css, I marked the edits. Also, to improve the visualization of your images, you can add rules - height: 100% and object-fit: cover for img tag (It's not obligatory).
.box1, .box2 {
display: flex;
}
img {
height: 200px;
width: 100%;
}
.box2 .left, .box1 .right, .box2 .right, .box1 .left {
width: 100%;
flex-basis: 50%; /*add this it*/
}
.box2 .left {
padding: 25px 10px 25px 75px;
box-sizing: border-box; /*add this it*/
}
.box1 .right {
padding: 25px 75px 25px 10px;
box-sizing: border-box; /*add this it*/
}
<div class="container">
<div class="box1">
<div class="left"><img src="https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg" alt=""></div>
<div class="right">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.
Reprehenderit sapiente numquam totam possimus necessitatibus. Enim nostrum rem quasi voluptates. Consectetur, est aliquid. Iste voluptas laborum provident harum! Ipsam pariatur velit iste quam, dolorum inventore rem molestias modi nemo?
</div>
</div>
<div class="box2">
<div class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.
Reprehenderit sapiente numquam totam possimus necessitatibus. Enim nostrum rem quasi voluptates. Consectetur, est aliquid. Iste voluptas laborum provident harum! Ipsam pariatur velit iste quam, dolorum inventore rem molestias modi nemo?
</div>
<div class="right"><img src="https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg" alt=""></div>
</div>
</div>
change your image to a background image. In this case, you need not specify the height and width of an image, which means truly responsible.
Just change the container height and width for a different viewport and it will always take 50% height and width..
* {
box-sizing: border-box;
}
.container{
display:flex;
flex-direction: column;
width: 600px;
height: 600px;
}
.image{
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url('https://cdn.wallpaperhub.app/cloudcache/1/b/5/8/e/f/1b58ef6e3d36a42e01992accf5c52d6eea244353.jpg')
}
.box-1, .box-2{
display:flex;
flex-direction: row;
flex-basis: 50%;
}
.image, .content{
border: 1px solid black;
flex-basis: 50%;
}
.content{
padding: 30px;
}
<div class="container">
<div class="box-1"><div class="image"></div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt,</div></div>
<div class="box-2"><div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, non. Molestias voluptas velit quae itaque natus nam odio obcaecati minima recusandae enim eos mollitia est animi incidunt, beatae iure perspiciatis.</div>
<div class="image"></div></div>
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
I try to create a simple layout using display:inline-block
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
display: inline-block;
width: 200px;
height: 390px;
color: white;
padding: 25px;
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
<div class="box1 box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
</div>
<div class="box2 box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
</div>
<div class="box3 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
<div class="box4 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
But it gives unexpected results have a look at the Screenshot. Please guide me on why is that. Is there something wrong with my code or am I missing some hidden concept behind display:inline-block?
You just need to add vertical-align: top; on your .box element.
Here's the example, with the code you had provided:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
display: inline-block;
width: 200px;
height: 390px;
color: white;
padding: 25px;
vertical-align: top; // here's the magic
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
<div class="box1 box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
</div>
<div class="box2 box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
</div>
<div class="box3 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
<div class="box4 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
For a better approach, I suggest you to wrap all the .box elements on a parent element .boxes-container and use display: flex and flex-wrap: wrap on this new parent element.
Here's the solution for the second case:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.boxes_container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 200px;
height: 390px;
color: white;
padding: 25px;
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
<div class="boxes_container">
<div class="box1 box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
</div>
<div class="box2 box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
</div>
<div class="box3 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
<div class="box4 box">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
possimus quidem consectetur, laborum quos sed?
</div>
</div>
You can use inline-flex instead of inline-block. It works.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
display: inline-flex;
width: 200px;
height: 390px;
color: white;
padding: 25px;
}
.box1 {
background: turquoise;
}
.box2 {
background: #f5c402;
}
.box3 {
background: lightsalmon;
}
.box4 {
background: teal;
}
Along with display:inline-block you may like to use vertical-align property. In your case:
.box {
display: inline-block;
}
Try to add float:left; to .box
How to make img full height of section as showed on attached image?
I'd like to do it from css level, because I'm trying to do it by going to the tablet screen from media query.
I was trying to do this with grid-template, but it wasn't working fine.
(Using scss)
.main-content {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: space-evenly;
}
.main-content:nth-child(2n) {
flex-direction: row;
.main-content>*:nth-child(1) {
width: 30%;
}
.main-content>*:nth-child(2) {
width: 60%;
}
}
.main-content>*:nth-child(1) {
width: 60%;
}
.main-content>*:nth-child(2) {
width: 30%;
}
.main-content>*:nth-child(3) {
width: 100%;
}
#media (min-width: 700px) {
.main-content {
display: flex;
}
}
<section class="main-content">
<h4>Jakie projekty można zgłaszać?</h4>
<img class="chmurka" src="images/ilustracja_misja21-06 1.svg" alt="chmurka">
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dicta minima accusantium vel impedit, voluptates mollitia veniam facilis ipsum reiciendis repudiandae aperiam sequi error id. Nobis, placeat incidunt. Velit, saepe? Odio eos libero, molestias
culpa beatae ipsam itaque, aut numquam aperiam in adipisci veniam recusandae perferendis aspernatur dolorum maxime. Eveniet magni numquam et, nulla aspernatur doloremque repudiandae aliquam nesciunt voluptate.
</article>
</section>
Your structure is not good at all, here is an example :
.main-content{
display:flex;
justify-content: space-between;
width: 100%;
}
.first{
width: 33%;
}
.second{
width: 66%;
}
<section class="main-content">
<div class="first">
<img class="chmurka" src="images/ilustracja_misja21-06 1.svg" alt="chmurka">
</div>
<div class="second">
<h4>Jakie projekty można zgłaszać?</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dicta minima accusantium vel impedit, voluptates mollitia veniam facilis ipsum reiciendis repudiandae aperiam sequi error id. Nobis, placeat incidunt. Velit, saepe? Odio eos libero, molestias
culpa beatae ipsam itaque, aut numquam aperiam in adipisci veniam recusandae perferendis aspernatur dolorum maxime. Eveniet magni numquam et, nulla aspernatur doloremque repudiandae aliquam nesciunt voluptate.
</p>
</div>
</section>
section {
display: grid;
grid-template: "i h" "i a" / min-content auto;
grid-gap: 1em;
}
img {
grid-area: i;
}
h4 {
grid-area: h;
margin: 0;
}
article {
grid-area: a;
}
<section class="main-content">
<h4>Jakie projekty można zgłaszać?</h4>
<img src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG">
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dicta minima accusantium vel impedit, voluptates mollitia veniam facilis ipsum reiciendis repudiandae aperiam sequi error id. Nobis, placeat incidunt. Velit, saepe? Odio eos libero, molestias
culpa beatae ipsam itaque, aut numquam aperiam in adipisci veniam recusandae perferendis aspernatur dolorum maxime. Eveniet magni numquam et, nulla aspernatur doloremque repudiandae aliquam nesciunt voluptate.
</article>
</section>
Unable to use Horizontal scroll container inside a grid item. Grid item width gets expanded when a scroll container is inserted. Even scroll container unable to scroll horizontally. When I define a fixed width for the scroll container then only it is working but I want a responsive result. Can anyone please help me with this?
Here is the code snippet.
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
}
.code_container {
padding: 10px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: white;
}
.code {
display: inline-block;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod
voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad,
officia iste, debitis molestiae explicabo repellat saepe nemo cupiditate nisi. Asperiores dolorem
inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque
magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae
necessitatibus distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit
iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam
eos, quae unde provident illum doloribus excepturi optio laudantium quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
</div>
Unless content is set to absolute, parent div will keep growing to fit its contents size. This will make your black box (code container) grow. To prevent it, set positioning of code_container's child(.code) to absolute.
.code {
display: inline-block;
position: absolute;
}
But now, code's content jumps out from code container. To prevent this, give .code a fixed width. In your case, give 100%.
.code {
display: inline-block;
position: absolute;
width: 100%;
}
But still nothing will change because it takes it's 100% width compared to the width of the body. To prevent this, set .code's parent (.code_container) position: relative;. Now because .code's parent is positioned relative, code will calculate it's 100% width relative to .code_container's width.
Now you should be able to do horizontal scrolling and it is responsive! But the horizontal scroll bar is covering the content. So give .code_container a min-height (about 30px in your case).
Tested in chrome and firefox. Works fine!
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
}
.code_container {
padding: 10px 20px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: red;
position: relative;
min-height: 30px;
}
.code {
display: inline-block;
position: absolute;
width: 100%;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad, officia iste, debitis molestiae explicabo repellat saepe
nemo cupiditate nisi. Asperiores dolorem inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae necessitatibus
distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam eos, quae unde provident illum doloribus excepturi optio laudantium
quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio eos dolorem suscipit commodi.
</div>
</div>
Finally I have resolved the issue. Just need to include these lines inside container:
min-width: 0;
overflow: auto;
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
/* Auto scroll horizontally */
min-width: 0;
overflow: auto;
}
.code_container {
padding: 10px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: white;
}
.code {
display: inline-block;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod
voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad,
officia iste, debitis molestiae explicabo repellat saepe nemo cupiditate nisi. Asperiores dolorem
inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque
magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae
necessitatibus distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit
iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam
eos, quae unde provident illum doloribus excepturi optio laudantium quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
</div>
How would I make the header full width? And I would like the content class to the right, and the skills class to the right 30% to 70%. If you are able to understand the issue I wasn't able to figure out please tell me what you did to get it to work. Thanks.
I couldn't find any info on how to make the header full width, and move the content to other spots...
* {
box-sizing: border-box;
overflow: hidden;
padding: 10px;
margin: 0px;
}
body {
background-image: url("coder.jpeg");
background-size: cover;
}
.wrapper {
display:grid;
grid-template-columns: 70% 30%;
grid-template-rows: ;
grid-gap: 10px;
}
.header {
background-color: rgba(153, 153, 153, 0.99);
text-align: center;
border-radius: 10px;
font-size: 20px;
}
.skills {
background-color: rgba(153, 153, 153, 0.99);
border-radius: 10px;
}
.content {
background-color: rgba(153, 153, 153, 0.99);
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cl32</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<header>
<h1>Cdad</h1>
</header>
</div>
<div class="skills">
<aside>
<h2>Skills</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla fuga asperiores iusto eveniet aliquid nobis aliquam ducimus, tempora consequatur neque earum molestiae unde porro, quis numquam error illum temporibus, incidunt autem. Temporibus maxime esse magnam inventore odit vero in quae sit quo laboriosam? Architecto saepe repudiandae ducimus possimus magni numquam?</p>
</aside>
</div>
<div class="content">
<h2>yuyuyggoggo</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum mollitia sunt at aliquid unde vel sapiente quas sequi repudiandae, quam facere inventore suscipit sed nam quae possimus reprehenderit doloremque. Reprehenderit nisi architecto vel molestiae placeat necessitatibus deleniti laborum facere unde itaque magnam amet ut aspernatur distinctio atque ad perspiciatis nam beatae fugiat illum error veritatis, cupiditate odit? Deserunt earum magni id animi, temporibus sit obcaecati ipsum. Blanditiis, expedita? Fugit dicta ex dignissimos, esse totam voluptas illo maxime minus quae nisi velit nemo sequi nulla et omnis deserunt nam sed ducimus. Minima animi dolor vitae architecto suscipit ipsa eaque autem incidunt.</p>
</div>
</div>
<!--warpper class ends-->
</body>
</html>
Don't know if I understand your question correctly but if you add grid-column: 1 / span 2;to your header class it will give you full width.
I have two columns set to 50%, left with text and right with image that should fill whole column vertically. The problem is that when text is a little bigger, there is a gap below the image. Is it possible to always have the image occupy the full height (but in same ratio)? For example, the image could get wider than its column, in that case I could just set overflow hidden.
.flex {
display: flex;
border: 3px solid black;
padding: 10px;
}
.col {
border: 1px dashed #aaa;
}
.left {
padding: 30px;
}
<div class="flex">
<div class="col left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit
ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo,
quod reprehenderit omnis! Sequi nulla nemo a magni voluptates.
</p>
</div>
<div class="col right">
<img src="http://placehold.it/550x250" alt="">
</div>
</div>
You have to set following CSS properties to image
height:100%;
width:auto;
.flex {
display: flex;
border: 3px solid black;
padding: 10px;
}
.col {
border: 1px dashed #aaa;
overflow-x: hidden;
}
.left {
padding: 30px;
}
.right img {
height: 100%;
width: auto;
}
<div class="flex">
<div class="col left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit
ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo,
quod reprehenderit omnis! Sequi nulla nemo a magni voluptates.
</p>
</div>
<div class="col right">
<img src="http://placehold.it/550x250" alt="">
</div>
</div>
The quickest way to get the image to fill the vertical height of the container would be to make the parent a flex container. This automatically applies align-items: stretch to the children (in this case, the image).
.right { display: flex; }
From that point, you could use various methods to set the correct aspect ratio to the image. You could use percentage height, if you have defined heights on the parent / ancestors.
Or you could use the object-fit property.
.flex {
display: flex;
border: 3px solid black;
padding: 10px;
}
.col {
border: 1px dashed #aaa;
}
.left {
padding: 30px;
}
.right {
display: flex;
}
img {
object-fit: cover;
}
<div class="flex">
<div class="col left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit
ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo,
quod reprehenderit omnis! Sequi nulla nemo a magni voluptates.
</p>
</div>
<div class="col right">
<img src="http://placehold.it/550x250" alt="">
</div>
</div>
Note that object-fit is not natively supported in Internet Explorer. For more details and a workaround see: Why isn't object-fit working in flexbox?