在Zurb Foundation中是否有类似于Bootstrap的img-responsive的等效选项？

Question

我知道 foundation 有 interchange 功能，它可以在不同的断点下使用小图来替换大图，但是我想要像 bootstrap 的 img-responsive 那样重新调整图片的大小。

- KinsDotNet

---

它被称为图像源集，这是最好的方法，因为图像适当地更小、更轻，从而更快地下载到移动设备上。这是现代的/当前的做事方式。 https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ - Carol McKay

img-responsive类所做的就是应用以下CSS属性：max-width: 100%; height: auto; 和 display: block;。我不确定你期望的答案是什么。你可以创建一个具有这些属性的类并使用它。 - Ricky Ruiz

Answer 1

你可以使用以下样式创建新的 .img-responsive 类，并直接应用到你的代码中。这将使图片按比例缩放以适应父元素。

您可以使用以下样式创建新的 .img-responsive 类，并直接应用到您的代码中。这将使图像按比例缩放以适应其父元素。

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

- trungk18

Answer 2

bootstrap .img-responsive 是一个带有以下属性的 bootstrap 类

display: block;
max-width: 100%;
height: auto;

因此，您可以使用相同的属性创建自己的定制版。

- Mohamed Sobhy