这个css效果是如何实现的？

Question

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

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

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

两个不同的网站：

想知道这是怎么做到的？

Answer 1

您所描述的只是包含fluid-height和fixed-height的图片。

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

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

液体高度：

＆＃13;

＆＃13;

.fluid-height{
  max-width: 100%:
  height: auto;
  width: 100%;
}

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;

固定高度：

＆＃13;

＆＃13;

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

img{
  height: 500px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

网站上的响应式扩展

右侧图像与围绕它的div一起缩放。
|容器
- |图片
|结束容器

• 在图像上设置width:50%;会占用容器的50％。
• 容器与viewPort或window缩放 容器有display: inline-block;，以便其他元素可以放在它旁边。

示例：

• 红色元素是容器，
• 蓝色代表窗口。

Javascript只是按下按钮时缩放蓝色窗口。

＆＃13;

＆＃13;

document.addEventListener("DOMContentLoaded", function() {
  let counter = 1;
  let button = document.getElementById("scale");
  let tmpWindow = document.getElementById("pretend");
  button.addEventListener("click", function(e) {
    counter++;
    var nextWidth = parseInt(tmpWindow.style.width) - (10 * counter);
    tmpWindow.style.width = nextWidth + "px";
  });
});

＆＃13;

.test-window {
  /*width: 700px;*/
  border: 5px solid blue;
}

.container-right {
  display: inline-block;
  vertical-align: top;
  border: 5px solid red;
  width: 50%;
  height: 100%;
  line-height: 0;
}

.container-right img {
  width: 100%;
}

.container-left {
  display: inline-block;
  width: 200px;
  border: 5px solid black;
}

＆＃13;

<div>
  <button id="scale">Shrink window size</button>
</div>
<div id="pretend" class="test-window" style="width:700px;">
  <div class="container-right">
    <img id="img-right" src="https://lorempixel.com/200/200/" />
  </div>
  <div class="container-left">
    <p>Dante, astray in a wood, reaches the foot of a hill which he begins to ascend; he is hindered by three beasts; he turns back and is met by Virgil, who proposes to guide him into the eternal world. Midway upon the road of our life I found myself within
      a dark wood, for the right way had been missed. </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

解决了这个问题：

.somediv {
    background-image: url("baloon.jpeg");
    background-size: cover;
    background-position: center;
}