问ASP.NET Core3.1响应图像

EN

设置一个特定的值将导致宽度和高度，并且它不会因为窗口的变化而改变。您可以设置百分比，以便在调整窗口时，它将根据窗口的比率进行更改。

<img src="~/Images/vg.png" height="30%" width="40%" />

​

​

您可以将img-fluid类添加到映像中，这是由引导 css库提供的。要使其工作，您必须从图像标记中删除html属性height="300" width="400"。您所提出的非常不恰当的问题表明，这个解决方案应该是您想要的UI行为。

因此，您的代码可能如下所示：

<div class="row">
    <div class="col-md-6">
        <div class="border">
            <!-- Remove the fixed width and height and add the class img-fluid -->
            <img class="img-fluid rounded" src="~/foo/bar.png">
            <p>Lorem ipsum...</p>
        </div>
    </div>
</div>

描述:引导带中的图像是用.img-fluid做出响应的。将max-width: 100%; and height: auto;应用于图像，使其与父元素进行缩放。

下面是引导程序的正式文档：

• 4.6.x (目前由ASP.NET Core3.1使用)
• 5.0.x (默认情况下将很快使用)

PS：我强烈鼓励您将每个样式声明从内联标记移动到css，以适应编码最佳实践。引导还提供了最重要的布局和设计助手，这应该是基本的工作(见我的答案)。