没有绝对位置和其他我不能居中图像

Question

我有两个 div，每个都有图像和标题。

我希望图像垂直居中或填充 div 元素而不拉伸或任何不寻常的调整大小。

我在 Whosebug 中搜索并使用了 How TO - Center Elements Vertically- CSS Layout - Horizontal & Vertical Align 之类的任何建议和一些问题的答案，但 none 有效。

我想使用和显示响应式元素

我用这张图做测试：

.border_slide {
  overflow: hidden;
}
.other_titles
{
  margin-top: 5px;
  height: 120px;
}
.other_titles div
{
  width:49.5%;
  margin-bottom: 5px;

}
.other_titles_cap
{
  position: absolute;
  z-index: 100;
  width:100%;
  background-color: rgba(69,69,69,0.4);
  height: 70px;
  margin-top: 80px;
  transition: all 0.3s ease 0s;
}
/*.other_titles_cap:hover
{
  margin-top: 0;
  height: 150px;
}*/
.title2
{
  height: 150px;
  background-color: #9bfff0;
  /*margin-left: 15px;*/
  float: right;
}
.title2 img
{
  margin-top: 0;
  transition: all 0.4s ease 0s;
}
.title2:hover .other_titles_cap
{
  margin-top: 0;
  height: 150px;
}
.title2:hover img
{
  width: 115% !important;
  opacity: 0.8;
  transform:translate(7%,-10%);
  -ms-transform:translate(7%,-10%);
}

.title3
{
  height: 150px;
  background-color: #ffd5c4;
  float: left;
}
.title3 img
{
  /* transform: translate(7%,-10%); */
  -ms-transform:translate(7%,-10%);
  margin-top: 0;
  transition: all 0.4s ease 0s;
}

.title3:hover .other_titles_cap
{
  margin-top: 0;
  height: 150px;

}
.title3:hover img
{
  width: 115% !important;
  opacity: 0.8;
  transform:translate(7%,-10%);
  -ms-transform:translate(7%,-10%);
}

<div class="other_titles">
  <div class="border_slide title2">
    <div class="other_titles_cap">title of Post2</div>
    <img class="" src="https://i.stack.imgur.com/k6HuQ.jpg" style="width:100%">
  </div>
  <div class="border_slide title3">
    <div class="other_titles_cap">title of Post3</div>
    <img class="" src="https://i.stack.imgur.com/90ten.jpg" style="width:100%">
  </div>
</div>

我主要需要这个用于宽度小于 520px 的响应模式。

您可以在此处进行测试：

jsfiddle

Answer 1

给你一个解决方案

.border_slide {
    overflow: hidden;
}
.other_titles
{
    
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100vh;
    justify-content: space-around;

}
.other_titles div
{
    width:49.5%;
    margin-bottom: 5px;

}
.other_titles_cap
{
    position: absolute;
    z-index: 100;
    width:100%;
    background-color: rgba(69,69,69,0.4);
    height: 70px;
    margin-top: 80px;
    transition: all 0.3s ease 0s;
}
/*.other_titles_cap:hover
{
    margin-top: 0;
    height: 150px;
}*/
.title2
{
    height: 150px;
    background-color: #9bfff0;
    /*margin-left: 15px;*/
    float: right;
}
.title2 img
{
    margin-top: 0;
    transition: all 0.4s ease 0s;
}
.title2:hover .other_titles_cap
{
    margin-top: 0;
    height: 150px;
}
.title2:hover img
{
    width: 115% !important;
    opacity: 0.8;
    transform:translate(7%,-10%);
    -ms-transform:translate(7%,-10%);
}

.title3
{
    height: 150px;
    background-color: #ffd5c4;
    float: left;
}
.title3 img
{
    /* transform: translate(7%,-10%); */
    -ms-transform:translate(7%,-10%);
    margin-top: 0;
    transition: all 0.4s ease 0s;
}

.title3:hover .other_titles_cap
{
    margin-top: 0;
    height: 150px;

}
.title3:hover img
{
    width: 115% !important;
    opacity: 0.8;
    transform:translate(7%,-10%);
    -ms-transform:translate(7%,-10%);
}

<div class="other_titles">
  <div class="border_slide title2">
    <div class="other_titles_cap">title of Post2</div>
    <img class="" src="https://i.stack.imgur.com/k6HuQ.jpg" style="width:100%">
  </div>
  <div class="border_slide title3">
      <div class="other_titles_cap">title of Post3</div>
      <img class="" src="https://i.stack.imgur.com/90ten.jpg" style="width:100%">
  </div>
</div>

jsfiddle

解决方案正在使用 flex css.

勾选 class other_titles

.other_titles {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100vh;
  justify-content: space-around;
}

Answer 2

类似下面的代码片段。

*, *:before, *:after{box-sizing: border-box;}
.other_titles{
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}
.border_slide {
  width: calc(50% - 10px);
  margin-bottom: 5px;
  overflow: hidden;
  position: relative;
  height: 150px;
}
.border_slide img{
  transition: all 0.4s ease 0s;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
}
.other_titles_cap{
  position: absolute;
  z-index: 100;
  width: 100%;
  background-color: rgba(69,69,69,0.5);
  height: 70px;
  bottom: 0;
  left: 0;
  transition: all 0.3s ease 0s;
  padding: 10px;
  font-size: 16px;
  color: #fff;
}
.border_slide:hover .other_titles_cap{
  margin-top: 0;
  height: 150px;
  background-color: rgba(0,0,0,0.75);
}
.border_slide:hover img{
  width: 115% !important;
  opacity: 0.8;
  transform: scale(1.2);
}

<div class="other_titles">
  <div class="border_slide">
    <img src="https://i.stack.imgur.com/k6HuQ.jpg">
    <div class="other_titles_cap">Title of Post2</div>
  </div>
  <div class="border_slide">
    <img src="https://i.stack.imgur.com/90ten.jpg">
    <div class="other_titles_cap">Title of Post3</div>
  </div>
</div>

没有绝对位置和其他我不能居中图像

I cant center image without absolute position and other esle

html

css

centering

responsive-images