Material Design Lite 中的响应图像

Question

我正在将 Bootstrap 的设计移植到 MDL（不要问）。我试图找到一些等效的机制来在 MDL 中实现 bootstrap 的 .img-responsive 功能，但我一直没有找到。有没有标准的方法可以做到这一点，还是我必须自己动手？

Answer 1

来自getbootstrap.com：

Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

这意味着推出自己的产品应该相当简单：

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

这当然假设某种父 div 会像 bootstrap.

中的 col-md-* 一样进行相应缩放

Answer 2

while I agree that's a way to do this, i'm looking to see if there's an MDL-standard way

我也在找同样的东西，又挖了一点，from the docs（这里一开始指的是卡片和里面的图片）：

For simplicity we opted to set a hard width and allow developers to override that as-needed since there is no set right way to have responsive cards display.

还有提到使用图片标签，你可能想要check support first...

@JakeC1020 答案目前是正确的实施方式。

Material Design Lite 中的响应图像

responsive image in Material Design Lite

twitter-bootstrap

material-design-lite

Responsive images