如何在引导程序中设置其高度和宽度后使图像响应答案

【问题标题】：How to make an image responsive after setting its height and width in bootstrap如何在引导程序中设置其高度和宽度后使图像响应
【发布时间】：2020-03-18 18:52:19
【问题描述】：

所以我正在构建这个作品集，我找到了使文本和其他内容响应的方法，但我无法使图片响应，我已将其高度设置为 325，但是当我缩小页面时，图像没有响应。我应该如何让它响应。原始图像尺寸约为 1000 x 900，我尝试缩小图像尺寸并使用 img-fluid 但效果不佳。 When I shrink the page When the page is in full view

<img src="{% static 'shetha.jpg' %}" height="325  "/>

【问题讨论】：

标签： css django bootstrap-4 responsive-images

【解决方案1】：

您只需添加静态图片 URL。如果你有 alt 那么你应该添加高度或宽度，或者如果你想要它们两者。但你必须删除它。 /

<img src="{% static 'shetha.jpg' %}" alt="Smiley face" height="42" 
width="42">

【讨论】：

plus alt 非常适合 Seo，上传图片时可以创建 Charfield 模型并从数据库中获取 alt 信息
没有帮助。我想设置高度并使其响应

【解决方案2】：

您也可以使用此代码！

<img src="{% static 'shetha.jpg' %}" class="img-fluid"  "/>

链接：https://getbootstrap.com/docs/4.4/content/images/

【讨论】：

我已经尝试过了，使用 img-fluid 将我的图片购买为原始尺寸，大约为 1000x900 并且覆盖整个页面

【解决方案3】：

响应式图像的另一个答案。然后您应该添加 CSS 并确保响应式类不使用其他东西并在head标签之前将css文件加载到html

HTML 文件

<img src="{% static 'shetha.jpg' %}" alt="Smiley face" 
class="responsive">

CSS 文件

.responsive {
    width: 100%;
    height: auto;
  }

如果你想在不创建 css 文件的情况下在 html 中加载 css 在图像之前使用此代码。

<style>
.responsive {
  max-width: 100%;
  height: auto;
 }
</style>

如果你想加载文件这样做

<!DOCTYPE html>
  <html>
  <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  <body>
 <img src="{% static 'shetha.jpg' %}" alt="Smiley face" 
class="responsive">
  </body>
  </html>

【讨论】：