MVC - Rendering an image in order to fit browser

Question

I am using MVC and getting the data from a Model into the View. Here is my code:

@ModelType MvcApplication9.ImageInfo
@Imports System.Web.Configuration.WebConfigurationManager

@Code

    ViewData("Title") = Model.ID.ToString
    Dim ImageURL As String = AppSettings("ImagesUrl")
    Dim FinalURL = String.Format("~/ContentTemporary/{0}", Model.ID.ToString + "/" + Model.fileName + "." + Model.Extension)

End Code


@Section Media

  @If Model.ID.ToString IsNot Nothing Then
    @:<div >
        @:<center>
                 @:<img src="@Url.Content(FinalURL)" alt="" />
         @:</center>
   @:</div>
  End If   


End Section

In _Layout.vb.html, I added this line:

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

I opened this page in Opera Mobile Emulator, and the picture didn't fit in the browser.

I want the image to be rendered in order to fit whatever browser it is opened in.

How to do this?

Answer 1

Try this

<div style="width:100%;float:left; text-align:center">
         <img src="@Url.Content(FinalURL)" alt="" style="max-width:100%;" title=""> 
    </div>