Geek Answers Handbook

Flexbox - Full square image horizontal component

I am trying to accomplish what seems like a very simple task with flexbox, but after a few hours I fail ...

I just want to create a horizontal component responsive with the image on the left , which will always be the 100%height and slightly flexible width of the text on the right .

It should be easy, but the image never stops overlapping at best ...

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
}

img {
  display: block;
  height: 100%;
  width: auto;
}

.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}
<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>
Run codeHide result
+6
source share
4 answers

div , :

height div witdh. - div width, width div div width. div width height. , height, div height. , , - fixed.

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
}

img {
  display: block;
  height: 130px;
  width: auto;
}

.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}
<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>
Hide result
+1

.card-grid{
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 200px;
  grid-gap: 0.5em;
}
.card-grid-img img{
  max-width: 200px;
  height: 100%;
  display: block;
  width: auto;
}
.card-grid-body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<div class="card-grid">
  <div class="card-grid-img">
    <img src="http://www.salavaux.ch/222/5_sq.jpg" alt="Card image">
  </div>
  <div class="card-grid-body">
    <h4 class="card-grid-title">Card title</h4>
    <p class="card-grid-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit. Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>
Hide result

, .

+1

.

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
  min-width: 130px;
}

img {
  display: block;
  height: 100%;
  width: auto;
}

.card-body {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}
<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>
Hide result
0

flex .card-img

flex : https://www.w3schools.com/cssref/css3_pr_flex.asp

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
  display: flex; //just add this line
}

img {
  display: block;
  height: 100%;
  width: auto;
}

.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}
<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>
Hide result
-2

More articles:


All Articles