사용자 화면 해상도에 따라 <asp:Image> 크기 조정

Question

화면에 이미지를 표시하고 싶습니다. 크기 (높이 및 너비)를 화면에 맞게 조정해야합니다 (늘림 또는 줄임). 이미지가 서버에 저장되었으며 1024 x 768 (예)입니다.

그래서, 그 순간에, 내가 이렇게 : X 800 800 (나는 조경 대 계정 세로 고려 크기

ImageUtilities.Dimension d = 
    ImageUtilities.ImageUtilities.GetImageSize(f.FullName); 
var newD = ImageUtilities.ImageUtilities.GetResized(d.Height, d.Width, 520, 520); 
Image1.Height = newD.Height; 
Image1.Width = newD.Width; 

그래서, 그 순간에, 나는 사각형에 맞게 내 이미지를 강요하고, 비율을 사용하여 aspect를 유지한다.

문제는 저해상도 화면에서 사용자가 이미지의 하단 (닫기 버튼이있는 곳)으로 가려면 약간 스크롤해야한다는 것이다. res scree, 1024로 1024를 사용할 수있는 영역으로 유지할 수 있습니다.

화면 해상도, 그리고 매개 변수를 내 코드 숨김 메소드 (GetResized는 새로운 높이와 너비를 반환하는 메소드)로 가져 가야합니까?

사용자가 브라우저를 최대화하지 않았을 수도 있음을 알고 있습니다. 괜찮습니다.

Answer 1

이미지 크기를 백분율로 정의하면이 항목에서 자유롭게됩니다. 당신은 화면 해상도에 대한 정보가 필요하면

Answer 2

자바 스크립트로 모니터 화면 해상도를 가져온 다음 javascript에서 이미지 크기를 변경하거나 화면 해상도를 코드 숨김으로 전달하고 C#으로 이미지 크기를 변경하십시오.

Answer 3

당신이 window.screen를 사용할 수는 다음과 같은 한 속성 :

Properties | Description 

기타로

---

availHeight | Specifies the height of the screen, in pixels, minus interface  
      |  features such as the taskbar in Windows. 
availWidth | Specifies the width of the screen, in pixels, minus interface 
      |  features such as the taskbar in Windows. 
colorDepth | The bit depth of the color palette available for displaying images 
      |  in bits per pixel. 
height  | The total height of the screen, in pixels. 
pixelDepth | Display screen color resolution (bits per pixel). Firefox 
      |  exclusive property. 
width  | The total width of the screen, in pixels. 

Answer 4

는 클라이언트 측 대신에 같은 시나리오를 처리하는 것이 좋습니다 언급 서버 측. CSS 스타일이나 JavaScript를 사용하는 것이 좋습니다.

더 많은 정보 :

• http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/
• Auto image resize based on browser window dimensions

Answer 5

은 화면 해상도에 따라 이미지 크기를 조정 사용자 지정 서버 컨트롤을 만들 생각 해 봤나? 다음 예는 이미지 컨트롤에 최대 너비 속성을 추가,하지만 당신은 최대 폭을 설정을 수정할 수 있습니다/높이 화면 해상도에 비례하기 :

using System; 

System.Web를 사용하는; using System.Web.UI.WebControls;

네임 스페이스 MyNamespace에 { 공용 클래스 MaxWidthImage : 이미지 { 개인 INT _MaxWidth;

public int MaxWidth 
{ 
    get 
    { 
     return _MaxWidth; 
    } 
    set 
    { 
     _MaxWidth = value; 
    } 
} 

protected override void OnPreRender(EventArgs e) 
{ 
    if (string.IsNullOrEmpty(ImageUrl)) return; 

    using (System.Drawing.Image MyImage = 
     System.Drawing.Image.FromFile 
     (HttpContext.Current.Server.MapPath(ImageUrl))) 
    { 
     int CurrentWidth = MyImage.Width; 

     if (MaxWidth != 0 && CurrentWidth > MaxWidth) 
     { 
      CurrentWidth = MaxWidth; 
     } 
     Attributes.Add("width", CurrentWidth.ToString()); 
    } 
} 

} 는} 당신이 CSS로 바이올린한다