css 图片 按4 3缩放

CSS是建立在HTML上的样式语言，常用于页面美化及排版。在网页中加入图片能够让页面更加生动有趣，同时为了更好的展示效果，我们可能需要对图片进行缩放。下面我们将介绍如何使用CSS对图片进行按4：3比例缩放。

首先，在HTML中插入一张图片：

    <img src="example.jpg" alt="example">

接着，在CSS中添加以下样式：

    img {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: calc(100vw * 3/4);
    }

以上样式中，width: 100%；height: auto；max-width: 100%；能够确保图片在大多数情况下能够充满所在的容器并保持原图比例。最后的max-height: calc(100vw * 3/4);则是缩放比例的关键。

在CSS中，calc()函数用于进行数学计算，100vw代表视口宽度，意为将图片高度设置为视口宽度的3/4。这样乘积就保持了4：3的比例。如果需要设定其他比例，只需要将3/4改为所需比例的分数即可。

这样做的好处是，无论网页在何种设备上展示，图片都能够保持固定的比例，同时自由缩放以适应不同的视口尺寸。使用CSS缩放图片，让你的网页更美观更舒适！