首页 / 技术问答 / Html问答列表 / 问答详情

Html 无法使用 flexbox 裁剪图像

我有一张尺寸正好的图片，但我不能让它垂直裁剪.我最终得到了图像溢出的空白区域，或者FlexBox将其自身扩展到图像范围.我如何才能解决这个问题，这样图像才能以一种响应性的方式与其他元素的高度相匹配？

enter image description here

白色方框是我想要删除的区域，这样图像就可以被裁剪以匹配其他元素，而不会zoom 图像.然而，我想不出如何才能做到这一点.(假设我可以使用普通的css)

body {
  max-width: 100vw;
  max-height: 100vh;
  font-family: var(--fontStyleStandard);
}

.mainContainer {
  display: flex;
  flex-direction: row;
  justify-content: left;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: var(--mainBgColor);
}

.formContainer {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  flex-direction: column;
}

.innerContainer {
  display: flex;
  width: auto;
  height: auto;
  background-color: var(--modulecolor1);
  position: relative;
  align-items: flex-start;
  flex-direction: column;
}

.bodyContainer {
  display: inherit;
  flex-direction: column;
  justify-content: space-between;
  margin: 0px;
  padding: 0px;
  width: auto;
  height: auto;
}

.fieldContainer {
  padding: 0 0 0 3rem;
  background-color: var(--modulecolor1);
  position: relative;
  box-shadow: 5px 2px 5px rgb(24, 12, 27);
  width: 100%;
}

.leftBanner.fixed {
  display: flex;
  /* background:border-box no-repeat left / contain fixed url("../img/sideImage2.png"); */
  /* max-height: 100vh; */
  max-height: 100%;
  width: 400px;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: top left;
}

.leftBanner>img {
  display: inherit;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 45%;
  min-height: 45%;
}

.formHeading {
  background-color: var(--modulecolor2);
}
<!-- Add your site or application content here -->
<div class="mainContainer">
  <div class="leftBanner fixed">
    <img src="./img/sideImage2.png" alt="">
  </div>
  <div class="bodyContainer">
    <div class="formContainer">
      <h4 class="formHeading fontstyle1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, totamimpeditcupiditate cumque atque aperiam delectus mollitia rem error incidunt consequuntur reiciendis asperiores id eveniet. In nemo alias debitis unde?</h4>

      <div class="buttonContainer"><button class="styled" form="signUp" type="submit">Create Account</button>
        <div>Already Have an account? <a href="">Log in</a></div>
      </div>
    </div>
  </div>
</div>

推荐答案

有两种方法可以实现这种种植， 首先，你可以将你的.leftBanner的高度设置为与你的.bodyContainer的高度相同，这很好，尽管它的响应性不会那么好，我也想你的.bodyContainer会有更多的内容，从而go 除固定的裁剪. 相反，我会做以下操作

body {
  max-width: 100vw;
  max-height: 100vh;
  font-family: var(--fontStyleStandard);
}

.mainContainer {
  background-color: var(--mainBgColor);
  background-color: red;
  display: flex;
  flex-direction: row;
  justify-content: left;
  width: 100vw;
  height: 100vh;
  margin: 0;
}
.bodyContainer {
  display: inherit;
  justify-content: space-between;
  margin: 0px;
  padding: 0px;
  width: auto;
}
.formContainer {
  /*Change the FormContainer to a flexbox and set to your intended Height/Max-Height */
  display: flex;
  /*This will be a flex Row  */
  flex-direction: row;
  height:fit-content;
  max-height: 400px;
  width: 100%;
  margin: 0;
  background-color: blue;
  padding: 0;
  align-items: flex-start;
}

.form{
  background-color:green;
  height:fit-content;
}
.leftBanner.fixed {
  /*set this image Height to 100%  filling the intended height of the formContainer give it a min-height so it will always have a size*/
  height:100%;
  min-height:200px;
  background: border-box no-repeat left / contain fixed 
    url("https://media.istockphoto.com/id/1167895713/photo/abstract-galaxy-watercolor-backgrounds.jpg?b=1&s=170667a&w=0&k=20&c=ivNkiy9Bq_CMEAEoGrDNQuilHll53fhAn-BKTgB9dqU=");
  background-color: green;
  display: flex;
  width: 400px;
}

.leftBanner > img {
  display: inherit;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 45%;
  min-height: 45%;
}

.formHeading {
  background-color: var(--modulecolor2);
}
<body>
  <div class="mainContainer">
    <div class="bodyContainer">
      <div class="formContainer">
    <!--Place the Banner inside the form this will restrict its max height to the height of the form-->
        <div class="leftBanner fixed">
          <img src="./img/sideImage2.png" alt="">
        </div>
        <div class='form'>
          <h4 class="formHeading fontstyle1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, totamimpeditcupiditate cumque atque aperiam delectus mollitia rem error incidunt consequuntur reiciendis asperiores id eveniet. In nemo alias debitis unde?</h4>

          <div class="buttonContainer"><button class="styled" form="signUp" type="submit">Create Account</button>
            <div>Already Have an account? <a href="">Log in</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

通过将横幅图像放在表单中，它的最大高度将始终是表单的高度.这样就把它剪到了正确的高度.

使用.leftBanner的background-image设置会出现问题，因为background-images没有设置高度，因此您需要为该类输入高度/分钟高度，才能将其注册为具有尺寸的活动div.或者使用<img></img>设置您的背景图像，并给它object-fit:cover

只要您不介意为表单设置一个最小高度，上述解决方案就会奏效.

Html相关问答推荐

XPATH text()函数遇到困难

如何将FlexBox项目zoom 到其包含图像的大小

Chrome和Safari浏览器中的CSS3动画不同

如何在Vim中删除Html标签？

用于删除页面页眉上的超链接的CSS

嵌套表列高度不是100%高度的问题

窗口视图之外的下拉菜单位置

如果DIV没有特定的sibling 姐妹，则以CSS为目标

：invalid Select 器的惰性判断

Web 组件 #shadow-root css 泄漏到文档

如何在悬停时使矩形按钮上的边框变圆

如何居中此按钮，即使它已经在计算机分辨率中居中

这两个CSS中的网格居中对齐内部盒子有什么区别？

对齐页面左侧的单选按钮

输入框不是全宽

SVG 调整大小而不是溢出

如何将图像移动到父容器的右侧？

我如何设置括号的样式，使它们不会挂在旁边的其他字符下面

鼠标悬停时切换 colored颜色 的双色链接

使用 CSS 的发光边框动画没有流畅的过渡

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630