试试这个:

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}

如果是背景图片，使用background-size:contain。

css例子:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

使用CSS按比例调整图像大小:

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

img {
    max-width:100%;
}

div {
    width:100px;
}

使用这个代码片段，您可以以更有效的方式完成它

我相信这是最简单的方法，也可以通过<img>标记中的内联样式属性来实现。

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

<img src="flower.png" class="scaled">

or

<img src="flower.png" style="transform: scale(0.7);">

通过保持图像的纵横比来缩放图像

试试这个,

img {
  max-width:100%;
  height:auto;
}