使用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進行響應式圖像大小調整

回答

相關問題