使用 Asp.net 和 CSS 的响应式图像大小调整答案

【问题标题】：Responsive Image sizing using Asp.net and CSS使用 Asp.net 和 CSS 的响应式图像大小调整
【发布时间】：2017-02-10 21:25:58
【问题描述】：

我今天花了几个小时尝试使用 asp.net 和 CSS 开发一个响应式网站。我已经成功地制作了一个响应文本的测试站点，但现在我正试图用图像来做。基本上，我希望在操作浏览器窗口大小时缩小图像。我已经阅读了几个教程，包括 W3 和各种帖子，如下所示：

How can I resize an image dynamically with CSS as the browser width/height changes?

但是当我更改浏览器大小时，我无法获得用于更改大小的 jpg。

我将使用一个非常简单的测试文件来解决这个问题。这是我所拥有的：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS\Pictures.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="Image">

        <asp:Image ID="Image1" runat="server" ImageUrl="Images\IMG_1410.jpg" style="width:300px;height:300px;" />

    </div>
    </form>
</body>
</html>

这当然是默认页面，CSS文件是：

.Image
{
    max_width: 100%;
    height: auto;
}

我已经尝试过您可以在此处看到的类版本以及使用#Image 的 div id。我什至在visual studio中进入了图像的属性并设置了图片像素长度，但仍然没有任何反应。我还添加了一次尝试：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

还是什么都没有。

任何帮助将不胜感激。即使我按照教程进行操作，我也不明白这是怎么回事。我肯定错过了什么。

提前感谢您的帮助。

【问题讨论】：

标签： html css asp.net

【解决方案1】：

您正在尝试使您的图片具有响应性，但您使用内联 CSS 来固定它们的大小：

style="width:300px;height:300px;"

删除它并修复其他答案中提到的错字，你应该很高兴。

【讨论】：

谢谢。我会试试的。很抱歉长时间缺席，我被转移到另一个项目几天了。现在我又回来了。

【解决方案2】：

我认为您可以通过在 Bootstrap 中使用 img-responsive 类来实现上述目标以下链接将为您提供更多信息

http://www.w3schools.com/bootstrap/bootstrap_images.asp

【讨论】：

感谢您的链接。我也去看看。

【解决方案3】：

尝试将您的 max_width 更改为 max-width :)

我正在使用这种技术来保持徽标对移动设备的响应非常简单。徽标会自动调整大小。

HTML

<div id="logo_wrapper">
  <a href="http://example.com" target="_blank">
    <img src="http://example.com/image.jpg" border="0" alt="logo" />
  </a>
</div>

CSS

#logo_wrapper img {
  max-width: 100%;
  height: auto;
}

希望这会有所帮助。

谢谢

【讨论】：

非常感谢。这也会很有帮助。

【解决方案4】：

我认为您可以通过在 Bootstrap 中使用 img-responsive 类来实现上述目标，以下链接将为您提供更多信息

【讨论】：