0

mvc3では、製品にはより多くの画像があり、すべての画像が表示されているように見える標準のボックスサイズがあります。ユーザーは、200x800、2200x500などのさまざまなサイズで画像を入力します。ただし、すべての画像を150x120サイズの標準ボックスに表示する必要があります。ほとんどの画像は150x120サイズのボックスで水平または垂直に伸びており、非常に悪いようです。

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

どうすればすべての画像を小さくできますが、比率を維持するにはどうすればよいですか？

4

2 に答える 2

4

プロポーションを保持する1つの方法は、幅の値をcssで設定することですが、その場合、画像には幅があり、開始画像によっては高さが不明になります。これは、ストレッチされた画像を修正する最も簡単な方法です。しかし、あなたは言及されたように高さを知りません。

また、多くの場合、大きな画像（大きな転送サイズ）をロードする必要があるため、これは適切な解決策ではない可能性があります。

かみそりコード

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

cssコード

.parentDiv img{
    width: 150px;
}
于 2012-09-07T07:19:51.077 に答える
1

良い質問があります。ただし、これを行う1つの方法は、javascriptを使用してある程度の割合でアップロードするようにユーザーに依頼することです。

たとえば、入力コントロールは次のようになります

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

そしてjavascriptであなたはファイルサイズなどをチェックすることができます。

もう1つは、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-07T07:13:52.057 に答える