主页 / 问题 / 1086344
Accepted
HTO HOT
Asked:2020-02-23 17:56:58 +0000 UTC2020-02-23 17:56:58 +0000 UTC

CSS 中的响应式图像

  • 772

请帮助我的网站上的CSS。

执行以下功能的正确方法是什么？

1）图像在屏幕中央。（你可以使用它position:fixed）

2）图像不应超出屏幕或容器。

3）将水平图像更改为垂直图像时，大部分图像可见。

这是两个图像的示例： https ://images.unsplash.com/photo-1581888517319-570283943d82?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=750&q=80 （垂直）

https://images.unsplash.com/photo-1534759846116-5799c33ce22a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1376&q=80（水平）

无需编写 javascript 即可更改图像。

css

1 个回答

  1. Best Answer

    以下background-size规则适用：

    cover- 偏移内容调整自身大小，以便在填充块时保持其比例：内容的最终大小将被定义为块的“覆盖”，受其宽度和高度的限制。

    contain- 浮动内容以这样的方式改变它的大小，使其根据自己的参数调整到块内的区域：内容的最终大小将被定义为“放置在”块内，受其宽度和高度的限制.

    这些规则也适用于适用object-fit于<img>and标签的属性<video>。

    使用示例：

    h4 {margin-bottom: 0;}

.viewport {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 180px;
  height: 50vh;
  max-height: 500px;
  margin-bottom: 20px;
  overflow: hidden;
  background: red;
}

.viewport.-bg .img,
.viewport.-img .img {
  display: block;
  width: 50%;
  height: 100%;
}

.viewport.-bg .img {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.viewport.-bg .img.-vertical {
  background-image: url('https://i.imgur.com/ArGfW4l.png');
}

.viewport.-bg .img.-horizontal {
  background-image: url('https://i.imgur.com/Qjz8bz0.png');
}

.viewport.-bg.-cover .img {
  background-size: cover;
}

.viewport.-bg.-contain .img {
  background-size: contain;
}

.viewport.-img .img > img {
  width: 100%;
  height: 100%;
}

.viewport.-img.-cover .img > img {
  object-fit: cover;
}

.viewport.-img.-contain .img > img{
  object-fit: contain;
}
    <h2>background-size</h2>

<h4>Без свойства</h4>
<div class="viewport -default -bg">
  <div class="img -vertical"></div>
  <div class="img -horizontal"></div>
</div>

<h4>С background-size: cover</h4>
<div class="viewport -cover -bg">
  <div class="img -vertical"></div>
  <div class="img -horizontal"></div>
</div>

<h4>С background-size: contain</h4>
<div class="viewport -contain -bg">
  <div class="img -vertical"></div>
  <div class="img -horizontal"></div>
</div>

<hr>

<h2>object-fit</h2>

<h4>Без свойства</h4>
<div class="viewport -default -img">
  <div class="img -vertical">
    <img src="https://i.imgur.com/ArGfW4l.png">
  </div>
  <div class="img -horizontal">
    <img src="https://i.imgur.com/Qjz8bz0.png">
  </div>
</div>

<h4>с object-fit: cover</h4>
<div class="viewport -cover -img">
  <div class="img -vertical">
    <img src="https://i.imgur.com/ArGfW4l.png">
  </div>
  <div class="img -horizontal">
    <img src="https://i.imgur.com/Qjz8bz0.png">
  </div>
</div>

<h4>с object-fit: contain</h4>
<div class="viewport -contain -img">
  <div class="img -vertical">
    <img src="https://i.imgur.com/ArGfW4l.png">
  </div>
  <div class="img -horizontal">
    <img src="https://i.imgur.com/Qjz8bz0.png">
  </div>
</div>

    • 3

相关问题