Css 将照片向下对齐至div并保持响应性

发布于04月05日

I am asking for your help because I am having difficulties via css to handle this situation. My goal is to create via css something like this. Here is the link https://ibb.co/gd5Rccw.

我已经try 在codepen上实现，但我很难处理然后响应.

.container {
       border: 1px solid #DDDDDD;
       background-color: #789456;
       max-width: 1920px;
       height: 600px;
       position: relative;
       margin:auto;
      border-radius: 35px;
    }
    
.tag {
   float: left;
   position: absolute;
   left: 0px;
   bottom: 0px;
   z-index: 1000;
   background-color: #92AD40;
   padding: 5px;
   color: #FFFFFF;
   font-weight: bold;
}

h1 {
  position:absolute;
  right:0;
  bottom:0;
}

<div style="height:350px;"></div>
<div class="container">
       <img class="tag" src="http://www.placehold.it/800x800">
       <h1>Title</h1>
</div>

推荐答案

您可以使用CSS Grid来对齐项目.在图像上设置align-self:end，以便如果高度溢出，则会从容器的顶部溢出.

此外，如果你想保持图像的长宽比，同时让它总是占据容器的左半部分，你需要object-fit:contain.使用百分比单位或fr单位表示响应性.

.container {
  border: 1px solid #DDDDDD;
  background-color: #789456;
  max-width: 1920px;
  height: 600px;
  position: relative;
  margin: auto;
  border-radius: 35px;
  display: grid;
  padding: 0 5rem;
  column-gap: 5rem;
  box-sizing: border-box;
  grid-template-columns: 50% 50%;
  grid-auto-rows: 100%
}

.tag {
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  width: 100%;
  align-self: end;
  object-fit: contain;
}

h1 {
  justify-self: start;
  align-self: center;
}

<div style="height:350px;"></div>
<div class="container">
  <img class="tag" src="http://www.placehold.it/800x800">
  <h1>Title</h1>
</div>

在您的例子中，容器查询是处理响应性的另一种方法(特别是因为比率和容器高度是已知的).例如，如果您认为屏幕宽度太小，图像无法溢出时(对齐结束)布局看起来不理想，则可以使用它来调整对齐方式:

.container {
  border: 1px solid #DDDDDD;
  background-color: #789456;
  max-width: 1920px;
  height: 600px;
  position: relative;
  margin: auto;
  border-radius: 35px;
  display: grid;
  padding: 0 5rem;
  column-gap: 5rem;
  box-sizing: border-box;
  grid-template-columns: 50% 50%;
  grid-auto-rows: 100%;
  container-type: size;
}

@container(max-width: 1198px) {
  .tag {
    align-self: center !important;
  }
}

.tag {
  background-color: #92AD40;
  padding: 5px;
  color: #FFFFFF;
  font-weight: bold;
  width: 100%;
  align-self: end;
  object-fit: contain;
  box-sizing: border-box;
}

h1 {
  justify-self: start;
  align-self: center;
}

<div style="height:350px;"></div>
<div class="container">
  <img class="tag" src="http://www.placehold.it/800x800">
  <h1>Title</h1>
</div>

Css相关问答推荐

我控制的自定义单选按钮无法重新 Select

CSS媒体查询不显示所需的输出

具有不同边框宽度和 colored颜色的边框半径，Safari渲染问题

输入中的框始终显示在MUI文本字段中

导航栏没有使用nextui获取页面的全部宽度

仅 Select 嵌套 div 的底部，而不知道它们的嵌套程度

如何使用：has() 父 Select 器 Select 父元素的子元素，在父元素和子元素之间没有中间层的情况下？

如何使我的标语(h1元素)不居中对齐？

如果中间元素的内容不适合 CSS，如何将其分隔到新行？

CSS 字符串变量的正确null值是多少？

Angular (13) material - 覆盖 CSS 文件不起作用

用css画3个三角形

如何为使用jsTreeR拖入层次 struct node 的元素添加顺序编号？

更改组件中 css 的值

CSS 中的区域类似于 C# 区域？

Bootstrap：在列之间添加边距/填充空间

HTML/CSS 中的单选/复选框对齐

如何填充 100% 的剩余高度？

CSS - 悬停穿过元素以激活悬停在被覆盖的元素上

谷歌的无图像按钮

实用课程推荐