如何在CSS中结合flexbox与object-position？附flex布局下图片裁剪后无法缩放问题求助

Hey Dante, sorry to hear this CSS snag has been bugging you for three weeks—let’s break this down and fix it right away.

The Root of the Problem #

When you added height: 100px to your images, you locked their height to a fixed value. Without that fixed height, your images used their natural aspect ratio to scale automatically with the flexbox columns as the window resized. But with a fixed height, even as the column width shrinks/grows, the image height stays stuck at 100px—this breaks the proportional scaling you want, and makes object-fit: none behave like it’s "over-cropping" instead of adapting.

The Fix #

Instead of a fixed height, use aspect-ratio to define the proportional size you want for your images. This way, the image height will automatically adjust as the flex column width changes, while still letting you crop to your desired area with object-fit and object-position.

Here’s the updated CSS for your images:

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  /* Replace fixed height with an aspect ratio matching your needs */
  aspect-ratio: 16/9; /* Adjust this value (e.g., 4/3, 1/1) to get your ideal crop frame */
  object-fit: none;
  object-position: 50% 6%; /* Your desired crop position stays intact */
}

If you specifically want a maximum height (similar to your original 100px) but still want scaling, you can combine aspect-ratio with max-height:

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  max-height: 100px;
  aspect-ratio: 16/9;
  object-fit: none;
  object-position: 50% 6%;
}

How to Combine Flexbox & Object-Position Effectively #

Flexbox handles the layout of your columns (their width, wrapping, and spacing), while object-position controls where your image is positioned within its own container. To make them work seamlessly together:

• Ensure your flex columns (.column) have flexible sizing (your existing flex: 14%; max-width: 14% is perfect for this)
• Set your images to fill the column width with width: 100%
• Use relative sizing for the image height (aspect-ratio or height: auto) instead of fixed values—this keeps the image container tied to the flex column’s responsive size
• object-position will now reliably shift the cropped area within the responsive image frame, even as the window resizes

Updated Full Code #

Here’s your complete code with the fix applied:

CSS

* { box-sizing: border-box; }
body { margin: 0; font-family: Arial; }
.row { 
  display: -ms-flexbox; /* IE10 */ 
  display: flex; 
  -ms-flex-wrap: wrap; /* IE10 */ 
  flex-wrap: wrap; 
  padding: 0 4px; 
}
.column { 
  -ms-flex: 14%; /* IE10 */ 
  flex: 14%; 
  max-width: 14%; 
  padding: 0 4px; 
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  aspect-ratio: 16/9; /* Adjust this to your preferred aspect ratio */
  object-fit: none;
  object-position: 50% 6%;
}
div.rowlabel1 { padding: 15px; text-align: center; font-size: 5vw; }
div.desc { padding: 15px; text-align: center; font-size: 1vw; }

HTML

<div class="row" id="">
  <div class="column">
    <div class="rowlabel1">Test</div>
  </div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
</div>
<div class="row" id="">
  <div class="column">
    <div class="rowlabel1">Test</div>
  </div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
  <div class="column">
    <div class="desc">Add a description of the image here</div><img src="wedding.jpg"></div>
</div>

Note: I removed the inline style="width:100%" from your images since that’s already defined in the CSS.

内容的提问来源于stack exchange，提问作者dantepicchioni