时间戳

首页 > 解决方案 > 这个css效果是怎么实现的？

javascript - 这个css效果是怎么实现的？

问题描述

几天前我遇到了两个不同的网站，这是一个响应式网站，但图片有不同的 css 规则。我不确定是只使用了 css 还是使用了一些 javascript。例如，在响应式网站中，当窗口变小时，图像也会变小，文本也会变小，并且可以操纵具有不同断点大小的文本。

1）我看到的是在第一个网站上，图像的高度保持不变，但是当屏幕变小时，其中的图像缩小了。我可以将此与相机的放大和缩小效果进行比较。当窗口变小时，图像缩小了。当窗口尺寸变大时，图像放大（同时高度保持不变）。

2）在第二个网站上，我注意到当屏幕变小时，图像（100％宽度）向屏幕左侧滑动，但高度保持不变。

两个不同的网站：

在此处输入图像描述

想知道这是怎么做到的？

标签： javascripthtmlcss

解决方案

您所描述的只是带有fluid-height和的图像fixed-height。

max-width: 100%在第一个示例中，图像设置为height: auto根据屏幕大小调整大小。

在第二个示例中，有一个容器div，max-width: 100%其中overflow: auto简单不允许图像超过窗口大小，并且您有一个固定高度的图像。

流体高度：

.fluid-height{
  max-width: 100%:
  height: auto;
  width: 100%;
}
<p>Fluid width and height</p>

<img class="fluid-height" src="https://images.unsplash.com/photo-1491308056676-205b7c9a7dc1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a4dc6385e23451fd8aa3458688757100&auto=format&fit=crop&w=4506&q=80">

固定高度：

div{
  max-width: 100%;
  overflow: hidden;
}

img{
  height: 500px;
}
<p>Fixed height</p>

<div>
<img class="fixed-height" src="https://images.unsplash.com/photo-1522206052224-9c5ad951dd74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6276d94baf7d9a4b6962be8d9e8aeb4b&auto=format&fit=crop&w=8100&q=80">
</div>

推荐阅读