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

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;
}

Demo

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

How to resize images without cropping or losing quality?

html

image

sizing