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

今天我花了几个小时尝试开发一个使用asp.net和CSS的响应式网站。我已经成功地制作了一个测试网站响应文本，但现在我试图用一个图像。基本上我想让图像缩小，因为我操纵浏览器窗口大小。我已经在这里看了几教程包括W3和各岗位是这样的：使用Asp.net和CSS进行响应式图像大小调整

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

我已经试过类版本，你可以在这里看到和使用＃DIV ID图像也是如此。我甚至进入了视觉工作室的图像属性，并设置图片像素长度，但仍然没有发生。我还补充说，在一次尝试中：

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

仍然没有。

任何帮助，将不胜感激。我不明白这是不是工作，即使我正在按照教程。我肯定错过了什么。

感谢您的帮助提前。

来源

2016-10-03 Isaac Dee

你试图让你的图片响应，但你必须内嵌CSS固定大小：

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

删除并修复对方的回答错字提到的，你应该是好的去。

来源

2016-10-03 00:39:59 SomeGuy

谢谢。我会尝试。对不起，我很长一段时间没有参加，几天后我被转移到另一个项目。现在我回来了。 –

试着改变你的MAX_WIDTH至最大宽度:)

我使用这种技术来保持徽标，为响应简单地way.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; 
}

希望这将帮助。

感谢

来源

2016-10-03 00:38:50

非常感谢你上面实现。这也会有所帮助。 –

我想你可以通过在引导使用img-responsive类下面的链接会给你更多的信息

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

来源

2016-10-04 07:09:27 Annalaxmi

感谢您的链接。我也会检查一下。 –

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

回答

相关问题