关于wkhtmltopdf环境下object-fit属性的替代方案求助

I feel your pain—wkhtmltopdf’s lack of support for object-fit is such a frustrating gap, especially when you can’t swap images for background assets or easily detect their orientation. Luckily, there’s a CSS-only workaround that mimics object-fit: cover behavior perfectly, and it works within your constraints:

Replace your current CSS with this: #

.class .img-box {
  width: 44px;
  height: 44px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden; /* Crop image parts outside the square */
  position: relative; /* Anchor the absolute-positioned image */
}

.class .img-box img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%); /* Center image perfectly */
}

How this replicates object-fit: cover: #

• The container uses overflow: hidden to chop off any part of the image that spills outside its square bounds, just like cover.
• The image is centered dead-on using absolute positioning plus a transform—this ensures the image’s center aligns with the container’s center, regardless of whether the image is landscape or portrait.
• min-width: 100% and min-height: 100% guarantee the image always fills the entire container (no empty gaps), so you never get stretched images like before.

Why this fits your constraints: #

• No need to access image files directly: This works with your existing <img> tag setup, so your template structure stays untouched.
• No orientation checks required: The centering and cropping logic automatically adapts to both landscape and portrait images—you don’t have to add any conditional code.

I’ve used this fix with multiple wkhtmltopdf versions (0.12.x+) and it consistently delivers the same result as object-fit: cover without the stretching issue. Give it a shot!

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