如何在不裁剪或降低质量的情况下调整图像大小

Question

>我正在尝试将图像与文本对齐，但图像大小有问题。我将在文本旁边放置许多行图像，因此我需要所有图像的大小都相同。

当我尝试插入图像时，它会被扭曲或切断。

我也希望所做的任何更改在移动设备上看起来也不错。

有什么提示吗？

<div>
    <p style="float: left; padding-right: 50px;"><img src="https://blog.proven.com/wp-content/uploads/IND.jpg" height="200px" width="300px" border="1px"></p>
    <p><p align="right"><strong><font size="4">Proven Rating: <font color="#0077b3">★★★★★</font></font></strong></p>
Indeed is a widely used job board with over 200 million visitors a month, in 60 different countries. They post millions of job listings from other job boards, newspaper classifieds, personal ads, and more.</p>
</div>

Answer 1

使用 CSS 设置图像的最大宽度，而不是内联大小属性。这消除了强制拉伸。

img {
  max-width: 300px;
}

演示