0

I have spent several hours today trying to develop a responsive website using asp.net and CSS. I have successfully made a test site responsive with text, but now I am trying to do it with an image. Basically I want to have the image shrink as I manipulate the browser window size. I have read several tutorials including W3 and various posts here like this:

How can I resize an image dynamically with CSS as the browser width/height changes?

but I cannot get the jpg that I am using to change size when I change the browser size.

I am going about this with a very simple test file. Here is what I have:

<%@ 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>

This is the default page of course and the CSS file is:

.Image
{
    max_width: 100%;
    height: auto;
}

I have tried the class version as you can see here and with div id using #Image as well. I have even gone into the properties for the image in visual studio and set the picture pixel length and still nothing is happen. I also added, in one attempt:

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

and still nothing.

Any help would be appreciated. I don't understand how this is not working even though I am following the tutorials. I must be missing something.

Thanks for your help in advance.

Community
  • 1
  • 1
Isaac Dee
  • 38
  • 1
  • 2
  • 10

4 Answers4

2

You're trying to make your images responsive, but you have inline CSS fixing their size:

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

Remove that and also fix typo mentioned in other answer and you should be good to go.

SomeGuy
  • 246
  • 2
  • 10
  • Thank you. I will try that. Sorry for the long absent, I was moved to a different project for a few days. Now I am back on it. – Isaac Dee Oct 18 '16 at 20:36
2

I think you can achieve the above by Using img-responsive class in Bootstrap the below link will give you additional information

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

Annalaxmi
  • 135
  • 1
  • 8
1

Try change your max_width to max-width :)

I'm using this technique to keep the logo as responsive for mobile devices as simply way.Logo will resize automatically.

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

Hope this would be help.

Thanks

Yuri Pereira
  • 1,945
  • 17
  • 24
0

I think you can achieve the above by Using img-responsive class in Bootstrap the below link will give you additional information

user11491877
  • 1