我想知道如何在不同屏幕尺寸的媒体查询中更改大小时，使图像逐渐改变大小而不是突然改变。例如，如果图像宽度为100像素，并且当屏幕的最大宽度为1000像素时变为500像素宽，则如何应用过渡效果，使图像逐渐变小而不是突然变小。我已经搜索过这个答案，但我似乎找不到我想要的东西。这是我想要做的网站示例。我从这个网站复制了html和css，但无法使效果起作用。要查看的图像是屏幕缩小时的滑块图像。
答案 0 :(得分：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%;
你应该得到预期的效果。