如何确保我的图片在我的网站上看起来清晰

Question

我正在处理我的投资组合，而我正处于从计算机添加图像的阶段。但是，当我上传图片时，只有我不更改html中的宽度/高度才能看清楚。然而，当我改变宽度/高度时，它变得拉伸和不清楚。

这是宽度/高度已更改的图片示例 -

这是我不改变宽度/高度时的图像 -

我正在使用的当前图像是jpeg，尺寸为1920×1044

我正在使用此方法调整图像大小 -

   <img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;height:300px;" />

看看我的codepen看看更多。我暂时在这里使用占位符图像。 理想情况下，我希望自己的照片与我的代码中的照片一样清晰。 - http://codepen.io/jordan_miguel/pen/gLwJRb?editors=1100

Answer 1

您的调整大小不成比例。如果您执行style="width:50%;"之类的操作，则图像将按比例显示，但会以指定的大小百分比显示。

Answer 2

您需要调整它的大小并保持原始图像的纵横比以避免拉伸它。

例如：

<img class="fade aspect" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image" />

CSS：

.aspect{
    height: 300px; //However tall you want it to be
    width: auto; //Don't specify the pixels
}

这也有效：

 .aspect{
    height: 300px; //However tall you want it to be
    width: 100%; //Don't specify the pixels
}

Answer 3

<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;" />

自动将高度修正为宽度

`<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="height:300px;" />` 

自动将宽度修正为高度