Question

因此，我正在构建此作品集，并且我找到了使文本和其他内容具有响应性的方法，但是无法使图像具有响应性，我将其高度设置为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  "/>

Answer 1

您只需添加静态图片网址。如果您有alt，则应该添加heigh或width，或者如果您想同时使用它们。但您必须将其删除。 / <-这个如果我的答案对您有帮助，请检查<3

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

Answer 2

您也可以使用此代码！

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

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

Answer 3

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

HTML文件

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

CSS文件

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

如果要在html中加载css而不创建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>

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

3 个答案: