html - 使用 Asp.net 和 CSS 调整图像大小

标签 html css asp.net

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

相关文章:

javascript - Canvas 图像模糊且不完整

html - Twitter Bootstrap - 如何在调整大小的浏览器窗口中构建表单?

html - Bootstrap 标签移动其他跨度

html - 创建不被浏览器解析的 HTML 代码(以供重用)

javascript - 如何在不进入多个框的情况下获取同一 div 中的内容?

javascript - 调用 window.open() 后 ListBox 被阻止

jQuery 找不到自定义属性

javascript - 处理右键单击事件后不显示上下文菜单

asp.net - 在 IE 的多行文本框中隐藏垂直滚动条

c# - SignalR 安全 : how is it working?