移动友好的大小调整图像

Question

我如何创建一个手动调整大小以适应桌面版的移动设备友好图像？

示例：

select ((foo.bar & power(2,1)::bigint) > 0)::int as first_bit,
    ((foo.bar & power(2,43)::bigint) > 0)::int as forty_third_bit
from (select 1031 as bar union all
    select 8796160131072 
    ) foo

300px对于移动版本来说太大了，但是我试图通过<div class="col-md-4"> <%= image_tag("Sample_Mach.png", :alt => "Sample pack cover, album art", :width => 300, :height => 300) %> </div> 在col-md-4课程之后进行，但是它会加载图像奇怪（在移动设备上太大，在桌面设备上太小） ）。我已尝试使用inherit，但它会以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