Question

我今天花了几个小时尝试使用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">

但仍然没有。

任何帮助将不胜感激。即使我遵循教程，我也不明白这是如何工作的。我肯定错过了什么。

提前感谢您的帮助。

Answer 1

您尝试使图像响应，但您使用内联CSS修复其大小：

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

删除它并修复其他答案中提到的拼写错误，你应该好好去。

Answer 2

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

SRP

Answer 3

尝试将max_width更改为max-width：）

我正在使用这种技术将徽标保持为对移动设备的响应，就像方式一样.Logo会自动调整大小。

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;
}

希望这会有所帮助。

由于

Answer 4

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

使用Asp.net和CSS响应图像大小调整

4 个答案: