图片无法正常显示答案

【问题标题】：Imges not displaying properly图片无法正常显示
【发布时间】：2017-07-19 05:52:45
【问题描述】：

在我的网站上，当用户上传他们的个人资料图片时，如果图片尺寸很小，它会变得很有趣。下面是一个例子

我不知道该怎么办当图像文件不是大尺寸时，有没有办法让我的图像正确显示。

【问题讨论】：

【解决方案1】：

确保图像容器的宽度和高度不是图像，并且在图像上使用以下内容

object-fit:cover; 
object-position:center; 
width:100%; 
height:100%;

【讨论】：

【解决方案2】：

试试这个......

 img{
   display: block;
   width:100%;
   height:auto;
}

【讨论】：

【解决方案3】：

<div class="hair_care">
                <img src="/Content/BusinessProfileImages/bbef41d2.jpg">
        </div>

这是我下面的 css 代码。对于具有大尺寸的小图像大文件来说，这不是很好。和小文件图像看起来很有趣。

.hair_care {
    float: left;
    width: 318px;
}

【讨论】：

【解决方案4】：

只需检查 IMG 标签上是否有宽度属性或通过 CSS 规则应用于图像标签上的硬编码像素/百分比宽度。

如果宽度属性带有 IMG 标签，请移除该宽度标签并让 CSS 控制宽度，并确保您设置了 'max-width: 100%' 和 'width: auto' 这是拇指规则响应式设计。

img {
    max-width: 100%;
}

其次，如果图像显示为背景图像，则检查“背景大小”属性。

【讨论】：