html - 移动友好的调整大小的图像

Question

我将如何创建一个已手动调整大小以适合桌面版本的适合移动设备的图像？

例子:

<div class="col-md-4">
  <%= image_tag("Sample_Mach.png", :alt => "Sample pack cover, album art", :width => 300, :height => 300) %>
</div>

300px 对于移动版本来说太大了，但我试图通过 inherit 让它在 col-md-4 类之后，但它加载图像很奇怪(在手机上太大，在桌面上太小)。我试过使用 % 但它以原始文件分辨率的 100% 加载它(仍然太大)。

Answer 1

Bootstrap 已经有响应式图像的默认类 .img-responsive w3schools.com/bootstrap/bootstrap_images.asp .

如果您使用的是 Bootstrap 版本 4.0.0，则使用类 img-fluid。 getbootstrap.com/docs/4.0/content/images