在 html 和 css 中调整图像大小

Posted 2023-05-08

【中文标题】在 html 和 css 中调整图像大小

【英文标题】：Image Resizing in html and css

【发布时间】：2022-01-14 14:56:42

【问题描述】：

伙计们，我正在学习 Web 开发并且在使图像响应时遇到问题。你能告诉我我应该在这里改变什么

html 代码

<div class="carousel-item active" style="background: url(assets/img/slide/slide-1.jpg);">

CSS

#hero 
       width: 100%;
       height: 100vh;
        background-color: rgba(39, 37, 34, 0.8);
       overflow: hidden;
       padding: 0;
      
#hero .carousel-item 
       width: 100%;
       height: 100vh;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
      
#hero .carousel-item::before 
       content: "";
       background-color: rgba(12, 11, 10, 0.5);
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
       bottom: 0;
     
#hero .carousel-container 
       display: flex;
       justify-content: center;
       align-items: center;
       position: absolute;
       bottom: 0;
       top: 0;
       left: 0;
       right: 0;
     

【问题讨论】：

Checkout background-size: cover ~ "缩放图像尽可能大以填满容器，必要时拉伸图像。如果图像的比例与元素不同，则将其裁剪要么垂直或水平，以便没有空白空间。”

你甚至没有放你的 html 代码，#hero 不存在

【参考方案1】：

如果将图像 div 放置在允许调整大小的包装 div 中，则可以使图像 div 自动调整大小。只需确保您的图像 div 锁定宽高比即可。

注意：如果包装器的纵横比与图像的纵横比不匹配，则会出现滚动条。

html, body 
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;


body 
  display: flex;
  align-items: center;
  justify-content: center;


.resizeable-container 
  display: flex;
  align-items: center;
  justify-content: center;
  resize: both;
  overflow: auto;
  border: thin dashed red;
  width: 200px; /* Initial size */


.banner 
  background-image: url(http://placekitten.com/240/180);
  background-size: cover;
  aspect-ratio: 4 / 3; /* 240/180 = 4/3 */
  width: 100%;

<div class="resizeable-container">
  <div class="banner"></div>
</div>

【讨论】：

link 这是我从中学习的项目的链接。我希望幻灯片中的这些图片具有响应性，当它们必须裁剪以适合窗口时，它们会从中间裁剪，焦点位于中间。例如，在幻灯片 1 中，双手应保持焦点的中心。请帮我解决这个问题