图像周围有空白区域？

Question

我试图使用引导程序显示图像但是我在图像的两侧获得了空白区域。这就是它的样子：

这是Html代码：

    <div class="container">
    <div class="row">
         @foreach (var item in Model)
         {
             <div class="col-sm-3">
                 <a href="@Url.Action("Details", new { id = item.ID })">
                @if (item.Picture != null)
                {
                    <div class="img">
                        <img src="@Url.Content(item.Picture)" height="200" width="200" />
                     </div>
                }
                else
                {
                    <div class="img">
                        <img src="~/Images/Silhouette.jpg" height="200" width="200" />
                    </div>
                }
                </a> <br />
                @Html.ActionLink(item.Name, "Details", new { id = item.ID })
             </div>
         }
    </div>
</div>

和Css：

html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden; 
}

.img {
border:1px solid black;
display: block;
}

Answer 1

请尝试将边框放在img标记中。

CSS：

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

.img, .img img {
    display: block;
}

.img img{
    border:1px solid black;
}