CODEWITHSUNDEEP
htmlcssflexbox
unknowndomain
unknowndomain

Reputation: 985

Resizing image within flexbox layout

I have a pay layout which works how I want to when using the .slides element has a background colour and height, it flexes as expected, however when I switch to filling it with an image this behaviour breaks as the images won't resize and I can't get my head around how to make them resize.

The idea is the left column of text remains fixed size, and the right column flexes up and down, eventually snapping under the left column at small sizes.

The reason for using an <img> and not a background image is because there is a image slide show that I want to put in here.

Can anyone help fix this issue?

body {
  margin: 1em;
}

p {
  margin: 0;
}

.container {
  display: flex;
  margin-top: 1em;
  width: 100%;
  flex-wrap: wrap;
}

.text {
  flex: 0 0 auto;
  width: 15em;
  margin-right: 1em;
}

.images {
  flex: 1 1 auto;
  min-width: 15em;
  max-width: 800px;
}

.caption {
  margin-top: .25em;
}
<div class="header">
  <a href="#">Title</a>
</div>
<div class="container">
  <div class="text">
    <p>Something about this project is really interesting.</p>
  </div>
  <div class="images">
    <div class="slides">
      <img src="https://via.placeholder.com/800x800">
    </div>
    <div class="caption">
      <p>Text about this project</p>
    </div>
  </div>
</div>

Upvotes: 1

Views: 4659

Answers (2)

VXp
VXp

Reputation: 12118

Changes made:

  • Enabled responsiveness for img elements
  • Commented out the flex-wrap: wrap
  • Set @media queries to define when the wrapping inside the .container div takes place

body {
  margin: 1em;
}

p {
  margin: 0;
}

img {
  display: block; /* removes bottom margin/whitespace */
  max-width: 100%; /* horizontally responsive */
  max-height: 100vh; /* vertically responsive */
}

.container {
  display: flex;
  margin-top: 1em;
  width: 100%;
  /*flex-wrap: wrap;*/
}

.text {
  flex: 0 0 auto;
  width: 15em;
  margin-right: 1em;
}

.images {
  flex: 1 1 auto;
  min-width: 15em;
  max-width: 800px;
}

.caption {
  margin-top: .25em;
}

@media (max-width: 33em) { /* 2 x 15em (.text & .images) + 2em  (left & right margin of the body element) + 1em (.text margin-right)  */
  .container {flex-wrap: wrap}
}
<div class="header">
  <a href="#">Title</a>
</div>
<div class="container">
  <div class="text">
    <p>Something about this project is really interesting.</p>
  </div>
  <div class="images">
    <div class="slides">
      <img src="https://via.placeholder.com/800x800">
    </div>
    <div class="caption">
      <p>Text about this project</p>
    </div>
  </div>
</div>

Upvotes: 2

user7207170
user7207170

Reputation:

Do you mean something like this ?

body {
  margin: 1em;
}
p {
  margin: 0;
}

.container {
  display: flex;
  margin-top: 1em;
  width: 100%;
  flex-flow:row wrap;
}

.text {
  flex: 0 0 auto;
  width: 15em;
  margin-right: 1em;
}

.images {
  flex:1 0 15em;
  min-width: 15em;
  max-width:800px;
}

.slides {
  display:flex;
}

.caption {
  margin-top: .25em;
}
<div class="header">
  <a href="#">Title</a>
</div>
<div class="container">
  <div class="text">
    <p>Something about this project is really interesting.</p>
  </div>
  <div class="images">
    <div class="slides">
      <img src="https://via.placeholder.com/800x800" />
    </div>
    <div class="caption">
      <p>Text about this project</p>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions