mvc3에서 이미지의 비율을 유지하면서 이미지를 표시하는 방법은 무엇입니까?

mvc3 제품에는 더 많은 이미지가 있고 모든 이미지가 보이는 표준 상자 크기가 있습니다. 사용자가 서로 다른 크기로 이미지를 입력합니다 (200x800, 2200x500 등). 하지만 표준 상자에 모든 이미지를 150x120 크기로 표시해야합니다. 대부분의 이미지 stretchs 가로 또는 세로 150x120 크기의 상자에 매우 좋지 않습니다.mvc3에서 이미지의 비율을 유지하면서 이미지를 표시하는 방법은 무엇입니까?

<img src="@Url.Content(Path.Combine("~/Uploads/Products/", @item.Date.Value.ToShortDateString(), @item.ImagePath1))" width="150" height="120" alt="" />

비율을 유지하기 위해 어떻게 모든 이미지는 작은 얻을 할 수 있지만
?

출처

2012-09-07 Jhoon Bey

좋은 질문이 있습니다. 그러나 이것을 수행하는 한 가지 방법은 사용자에게 javascript를 사용하여 일부 비율로 업로드하도록 요청하는 것입니다.

예 : 사용자의 입력 컨트롤

<input id="ImageFile" name="ImageFile" type="file" onchange="check_filesize(this.value,'upload');" />

처럼해야하며, 자바 스크립트에 등 파일 크기를 확인할 수 있습니다

또 다른 사용하여 파일의 크기를 조정할 수 있습니다 ImageResizeClass의와 업로드 컨트롤에 확인하는 것입니다 예상 크기를 div에 표시된 것과 일치시킵니다.

그래서 업로드 컨트롤러는 ...

public ActionResult Upload(Image image, HttpPostedFileBase ImageFile) 
    { 

ResizeImageHelper resizeImageHelper = new ResizeImageHelper(); 
           resizeImageHelper.ResizeImage(path + ImageFile.FileName, path + ImageFile.FileName, 640, 480, false); 
           resizeImageHelper.ResizeImage(path + ImageFile.FileName, path + "thumb" + ImageFile.FileName, 74, 74, false); 

           image.imageLocation = ImageFile.FileName; 
           image.imageThumb = "thumb" + ImageFile.FileName; 

           imageRepository.Add(image); 
           imageRepository.Save(); 

}

이미지를 완벽하게 보여 확인 할 수 있습니다이 방법을 다음과 같이 될 것이다.

당신이 이해하고 이것이 도움이 되길 바랍니다.

출처

2012-09-07 07:13:52

propotions를 유지하는 한 가지 방법은 css에서 너비 값을 설정하는 것입니다. 그러나 이미지의 너비는 높이고 시작 이미지에 따라 높이를 알 수 없습니다. 이것은 거리 이미지를 수정하는 가장 간단한 방법입니다. 그러나 언급 한 바와 같이 높이를 알 수는 없습니다.

큰 이미지 (큰 전송 크기)를로드해야하므로이 솔루션은 적절한 솔루션이 아닙니다.

면도기 코드

<img src="@Url.Content(Path.Combine("~/Uploads/Products/", item.Date.Value.ToShortDateString(), @item.ImagePath1))" alt="" />

CSS 코드

.parentDiv img{ 
    width: 150px; 
}

출처

2012-09-07 07:19:51 mattematico

mvc3에서 이미지의 비율을 유지하면서 이미지를 표시하는 방법은 무엇입니까?

답변

관련 문제