css - 响应式网站设计的渐进图像大小过渡

Question

我想知道如何使图像逐渐改变大小，而不是在针对不同屏幕尺寸的媒体查询中更改大小时突然改变大小。例如，如果图像是 100px 宽，当屏幕最大宽度为 1000px 时变为 500px 宽，如何应用过渡效果使图像逐渐变小而不是突然变小。我已经搜索过这个答案，但似乎找不到我要找的东西。这是我正在尝试做的网站示例。我从该站点复制了 html 和 css，但效果不佳。要查看的图像是屏幕尺寸缩小时的 slider 图像。

http://www.sensationalteeth.com/

Answer 1

要有一个过渡布局，你必须添加 transition: all 1s ease; 到根据不同的 media-queries 改变其大小的容器。

然后，如果您在其中添加具有以下 CSS 属性的 div.image:

background-image: url(some.jpg);
background-size: cover;
background-position: center;
height: 50vh; /* 50% of viewport height */
width: 100%;

您应该会得到想要的效果。

工作 JSFiddle DEMO