使图像适应其父容器大小

Question

我目前正在尝试使用Angular Bootstrap Carousel，并想要显示一些图片并能够单击它们。我的第一个问题是，我的所有图像大小不完全相同，并且它们不适合我的Bootstrap列中。通常情况下，图片宽度不足，因此在左侧和右侧留下了很多空白空间。是否可以自动裁剪/缩放图像，使其始终填充所有空间？我还有另一个问题...我如何将每个图片链接到某个东西？

- cvjensen

---

将图像缩放到比其原始尺寸更大的尺寸并不是一个好主意。结果图像可能会变形或像素化，这永远不是令人满意的。我的建议是确保原始图像具有所需的尺寸。 - Jackson

Answer 1

为了让您的图片自动放大到其容器大小，您需要应用一些CSS。Bootstrap的类将max-width设置为100％，但这并不会强制放大。

<style>
.oversize {
    width: 100%;
    height: auto;
}
</style>

将图像链接，将其包装在锚点内：

<a href="/some-page"><img src="/some-image.jpg" class="oversize" /></a>

- isherwood

---

谢谢@isherwood - 我已经尝试了您的代码示例，链接部分完美运行，但是我仍然在图片高度方面遇到一些问题。宽度在所有屏幕尺寸上都很完美，但如果图像太高，它就会突破我想要放置在其中的div。 - danededane

你可以设置宽度，也可以设置高度，但不能同时设置。在 div 上设置 overflow 为 hidden 来裁剪图像。如果需要更多帮助，请展示一些代码和/或演示。 - isherwood