Why does the image within the box shrink upwards when the window shrinks?-CodePudding

I really don't know what I'm doing wrong here. I want the image inside the box to stay centered when the window shrinks. Furthermore, I would have thought that align-items: center; would work, but apparently not. The colors are only relevant for me, so I understand what's going on. I don't know if there is a solution for this either, but I hope so. And please ignore the naming and order of the individual classes, I couldn't do better ...:)

.megadiv {
  max-width: 1600px;
  margin: auto;
  text-align: center;
}

.centerbox {
  display: flex;
  justify-content: space-between;
}

.left {
  width: 64%;
  background-color: red;
  justify-content: space-between;
  border: 2px solid gray;
  display: flex;
}

.insideleft {
  width: 20%;
  background-color: yellow;
  align-items: center;
  text-align: center;
  align-content: center;
}

.insideright {
  width: 78%;
  background-color: purple;
  float: right;
  padding-top: 2%;
  text-align: left;
  border-left: 2px ridge #ffa54f;
  padding-left: 2%;
  padding-bottom: 1%;
}

.picture {
  width: 80%;
  border-radius: 1%;
  margin-top: 10%;
  margin-bottom: 8%;
}

.right {
  width: 34%;
  border: 2px solid gray;
  height: 20px;
}

h7 {
  color: rgb(0, 153, 158);
  font-size: large;
  font-family: sans-serif;
}

.textpart {
  margin-bottom: 0.5%;
}

<div >
  <div >
    <div >
      <div >
        <h20>
          <a href="">
            <img  src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
        </h20>
      </div>
      <div >
        <h7><a href="">Headline</a></h7><br>
        <h4>
          <div >Authors</div>
          <div >Views <a  href="">Chapter 2</a></div>
          <div >Genres: Action - Adventure - Comedy</div>
          <div >Rating: ⭐⭐⭐⭐⭐</div>
        </h4>
      </div>
      <div >
        wawaeaweew
      </div>
    </div>
  </div>

h4 and h20 are empty

CodePudding user response：

You're pretty close to getting the image vertically aligned as you wanted. Try this out, and see if this works the way you would like:

.megadiv {
  max-width: 1600px;
  margin: auto;
  text-align: center;
}

.centerbox {
  display: flex;
  justify-content: space-between;
}

.left {
  width: 64%;
  background-color: red;
  justify-content: space-between;
  border: 2px solid gray;
  display: flex;
}

.insideleft {
  display: flex;
  width: 20%;
  background-color: yellow;
  align-items: center;
  text-align: center;
  align-content: center;
}

.insideright {
  width: 78%;
  background-color: purple;
  float: right;
  padding-top: 2%;
  text-align: left;
  border-left: 2px ridge #ffa54f;
  padding-left: 2%;
  padding-bottom: 1%;
}

.picture {
  width: 80%;
  border-radius: 1%;
  margin-top: 10%;
  margin-bottom: 8%;
}

.right {
  width: 34%;
  border: 2px solid gray;
  height: 20px;
}

h7 {
  color: rgb(0, 153, 158);
  font-size: large;
  font-family: sans-serif;
}

.textpart {
  margin-bottom: 0.5%;
}

<div >
  <div >
    <div >
      <div >
          <a href="">
            <img  src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
      </div>
      <div >
        <h7><a href="">Headline</a></h7><br>
        <h4>
          <div >Authors</div>
          <div >Views <a  href="">Chapter 2</a></div>
          <div >Genres: Action - Adventure - Comedy</div>
          <div >Rating: ⭐⭐⭐⭐⭐</div>
        </h4>
      </div>
      <div >
        wawaeaweew
      </div>
    </div>
  </div>

I saw you used align-items: center; in the .insideleft CSS selector which is for aligning a container's children to the center like you want, you'll just want to make this a flexbox to make this work. To do this, simply add display: flex; to the .insideleft selector like in the example. I also removed the <h20> tag from the HTML as this is not valid or necessary.

As for the image shrinking down when the screen width is shrinked - this is because you're using percentages for the widths for all the containers and the image. If you want the image to stop shrinking after a certain point, you can add min-width: 80px; /* (this can be any number of pixels) */ to your .picture selector to make the image stop shrinking once it gets to a certain width of pixels.

Flexbox is super useful for position elements in CSS and I'd recommend looking into this more to have a better understanding. Check out this link here if you'd like an overview of the different flexbox CSS properties.

CodePudding user response：

I am not 100% sure on your intent - Here I changed the class names a bit for clarity and adjusted the markup for a left-middle-right

Not a huge fan of % for padding and margin sizing myself (em feels more clear since it is based on the current font size)

Not strictly needed but I added the containing element class in a few places in CSS for clarity example: .left-pane .picture-container

.page-container {
  max-width: 1600px;
  text-align: center;
}

.container-box {
  display: flex;
  align-content: space-between;
}

.container-box .left-pane {
  width: 20em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FF0000;
  border: 2px solid gray;
}

.left-pane .picture-container {
  width: 30%;
  background-color: yellow;
  align-items: center; /* vertical */
  align-content: center; /* horizontal */
}

.left-pane  .picture-container .picture {
  width: 80%;
  border-radius: 1%;
  margin-top: 10%;
  margin-bottom: 8%;
}

.container-box  .middle-pane {
  width: 70em;
  background-color: #FFDDDD;
  padding-top: 2%;
  padding-left: 2%;
  padding-bottom: 1%;
  border-left: 2px ridge #ffa54f;
}

.middle-pane .headline {
  color: rgb(0, 153, 158);
  font-size: 1.5em;
  font-family: sans-serif;
  margin-bottom: 1em;
  background-color: #eeeeee;
}

.middle-pane .textpart {
  margin-bottom: 0.5em;
}

.container-box .right-pane {
  height: 20px;
  border: 2px solid gray;
}

<div >
  <div >
    <div >
      <div >
        <div>
          <a href="">
            <img  src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
        </div>
      </div>
    </div>
    <div >
      <div ><a href="">Headline</a></div>
      <h4>
        <div >Authors</div>
        <div >Views <a  href="">Chapter 2</a></div>
        <div >Genres: Action - Adventure - Comedy</div>
        <div >Rating: ⭐⭐⭐⭐⭐</div>
      </h4>
    </div>
    <div >
      wawaeaweew
    </div>
  </div>
</div>