使用图像编辑表格列宽百分比

时间:2018-09-24 07:22:33

标签: html css image html-table

我有许多不同的视图页面,它们具有许多表格宽度。示例:

  • 查看1 Product.cshtml:第一列的宽度为25%,第二列的宽度为 宽度75%
  • 查看2个Customer.cshtml:第一列的宽度为40%,第二列的宽度为 60%宽度

因此,我利用资源编辑了csstemplate。 How can I set table column widths in an MVC view?

仅使用文本,该解决方案效果很好。 但是,当我添加图像时,它完全忽略了表的宽度百分比,使图像看起来非常大。我将如何解决这个问题,并将图像保持在25%?

注意:现在提供静态图像以供测试,以后将使其可变。

Site.css

.col1 {
    width: 25%;
}

.col2 {
    width: 75%; 
}

产品索引。cshtml

@model IPagedList<ElectronicsStore.Models.Product>
@{
    ViewBag.Title = "Products";
    int counter = 0;
}
@using X.PagedList;
@using X.PagedList.Mvc.Core;


<table class="table" >
    <thead>
        <tr>
            <th class="col1">
               Product Image
            </th>
            <th class="col2">
               Product Name
            </th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in ViewBag.OnePageOfProducts)
        {
        <tr>
            <td class="col1">
                <img src="~/images/TV.jpg" data-holder-rendered="true" />
            </td>
            <td class="col2">
                @item.ProductName
            </td>
        </tr>
        }
    </tbody>
</table>



@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page }))

1 个答案:

答案 0 :(得分:1)

实际上,它与 ASP.NET Core MVC 无关。大约是HtmlCSS
您需要做的就是将此CSS样式添加到样式表中:

.col1 img { width: 100% }