我今天花了几个小时尝试使用 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">
还是什么都没有。
如有任何帮助,我们将不胜感激。我不明白这是怎么行不通的,即使我正在学习教程。我肯定错过了什么。
提前感谢您的帮助。
最佳答案
你试图让你的图片响应,但你有内联 CSS 来固定它们的大小:
style="width:300px;height:300px;"
删除它并修复其他答案中提到的拼写错误,您应该一切顺利。
关于html - 使用 Asp.net 和 CSS 调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39823049/