html - MVC 5 razor View 以实际大小显示图像，没有失真或拉伸(stretch)

Question

我正在尝试以实际尺寸在表格中显示一些图像。我将原件调整为 3 个大中号和缩略图。我正在尝试使用样式，但目前它正在扭曲图像，使它们非常模糊。

如何操纵样式或其他任何方式来正确调整这些样式的大小而不失真。我知道像素的大小。 大尺寸为 1900 x 1406 中号为 400 x 296 小是 100 x 100

我在下面提供了两个示例。首先，我想显示中等大小的示例，但将其缩小一点。 其次，我想以实际尺寸显示所有三个。

<div class="row">
    @{
        foreach (var item in Model.OrderBy(x => x.DisplayOrder))
        {
            <div class="col-sm-6 col-md-4 col-lg-4">
                <div class="thumbnail">
                    <img src="data:image/jpg;base64,@(Convert.ToBase64String(item.OrderedImages[0].LargeImage))" onclick="javascript:window.open('@item.OrderedImages[0].FilePathLarge');" alt="@item.OrderedImages[0].Name" />
                    <div class="caption">
                        <h2>@Html.DisplayFor(modelItem => item.ProductName)</h2>
                        <p>
                            @(Html.Kendo().DatePicker().Name("datepicker" + @item.ID))
                            @if (HttpContext.Current.User.IsInRole("admin"))
                            {
                                <a href="@Url.Action("Edit", "Products", new { id = @item.ID })" class="btn btn-primary" role="button">Edit Item</a>

                            }
                            <a href="@Url.Action("Index", "Products")" class="btn btn-primary" role="button">Add to Cart</a>
                            <a href="@Url.Action("Index", "Products")" class="btn btn-default">More Info</a>
                        </p>
                    </div>
                </div>
            </div>
        }
    }
</div>



@model IEnumerable<MVC.CFC.Domain.Models.ProductImage>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DisplayOrder)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LargeImage)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MediumImage)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ThumbImage)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DisplayOrder)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>
            <td>
                <div style="overflow:hidden;width:1900px;height:auto">
                    <img src="data:image/jpg;base64,@(Convert.ToBase64String(item.LargeImage))" alt="@item.Name" style="width: 50%; height: auto;" />
                </div>
            <td>
            <td>
                <div>
                    <img class="img-rounded" src="data:image/jpg;base64,@(Convert.ToBase64String(item.MediumImage))" alt="@item.Name" />
                </div>
            <td>
            <td>
                <div>
                    <img class="img-rounded" src="data:image/jpg;base64,@(Convert.ToBase64String(item.ThumbImage))" alt="@item.Name" />
                </div>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.ID })
            </td>
        </tr>
    }
</table>

Answer 1

您可以在图片标签的 html 中明确添加尺寸。

<img src="data:image/jpg;base64,@(Convert.ToBase64String(item.OrderedImages[0].LargeImage))"
onclick="javascript:window.open('@item.OrderedImages[0].FilePathLarge');"
alt="@item.OrderedImages[0].Name" height="@item.OrderedImages[0].height"
width="@item.OrderedImages[0].width"/>