技术需求：使vc_preview类图片自适应上方Div尺寸并嵌入适配

Let's get your images properly embedded and sized to fit their parent divs. Here's a straightforward CSS solution tailored to your existing HTML structure:

Step 1: Add This CSS #

First, drop this into your stylesheet to constrain the image to its parent container while maintaining aspect ratio:

/* Ensure the .vc_preview anchor tag fills its parent space */
.vc_preview {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Clip any image parts that go beyond the container */
}

/* Style the image to adapt perfectly */
.vc_preview img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This keeps aspect ratio and fills the container (no distortion) */
  /* Swap to object-fit: contain; if you want the full image visible (may add empty space) */
}

Step 2: Verify Parent Container Dimensions #

You already have inline width:...; height:..; on your .portfolio-item div, which is great. Just make sure the intermediate parent containers (.vc_anim-slide, .base contain) are also set to take full width/height of their parents. You can add this if needed:

.vc_anim-slide, .base.contain {
  width: 100%;
  height: 100%;
}

How It Works #

• display: block on .vc_preview removes any inline spacing quirks from the anchor tag, making it behave like a proper block container.
• width: 100% and height: 100% ensure the image's container takes up all available space from its parent.
• object-fit: cover is the magic here—it prevents image distortion by cropping the image (if needed) to fill the container while keeping its original aspect ratio. If you'd rather see the entire image even if it doesn't fill the container, use object-fit: contain instead.

Optional: Adjust Image Position #

If you want to control which part of the image is visible when cropping, add object-position: center; to the .vc_preview img rule (you can use values like top left, bottom right, or specific percentages too).

内容的提问来源于stack exchange，提问作者SH Yazılım Geliştirme