使图像缩放并保持在 div 的中间

Question

我正在使用 Bootstrap，我的代码如下所示：

<div class='col-md-12 col-sm-12 col-xs-12'>
    <div id='imgDiv' class='col-md-2 col-sm-3 col-xs-3'>
        <img id='myImg' src="blabla.jpg">
    </div>
    <div id='div1' class='col-md-7 col-sm-6 col-xs-6'>
    </div>
    <div id='div2' class='col-md-3 col-sm-3 col-xs-3'>
    </div>
</div>

我希望 imgDiv div 中的 img 始终垂直和水平居中，并在其他两个 div 中的一些（div1 和div2) 改变高度。我尝试了很多东西，但没有解决这个问题...

Answer 1

您可以使行 display: flex 使 3 列的高度相同，然后将 display: flex; align-items: center; justify-content: center; 添加到 #imgDiv

#imgDiv {
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 100%;
}

#div1 {
  background: blue;
}

#div2 {
  background: red;
}

#div1 p {
  height: 50vh;
  background: white;
}

#div2 p {
  height: 75vh;
  background: white;
}

.flex-row {
  display: flex;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class='col-md-12 col-sm-12 col-xs-12 flex-row'>
    <div id='imgDiv' class='col-md-2 col-sm-3 col-xs-3'>
        <img id='myImg' src="http://kenwheeler.github.io/slick/img/lazyfonz2.png">
    </div>
    <div id='div1' class='col-md-7 col-sm-6 col-xs-6'>
      <p>foo</p>
    </div>
    <div id='div2' class='col-md-3 col-sm-3 col-xs-3'>
      <p>foo </p>
    </div>
</div>

Answer 2

请添加到 #myImg div（仅作为示例..）100% 宽度：

<img id='myImg' style="width:100%" src=".....">

并添加以下内容 css :

#imgDiv{
  border: 1px solid red;
  min-height:300px;
  vertical-align: middle; 
  #myImg{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
}

#div1{
   border: 1px solid blue;
   min-height:600px;
}
#div2{
border: 1px solid green;
min-height:400px;
}

#imgDiv{
  border: 1px solid red;
  min-height:300px;
  vertical-align: middle; 

}
 #myImg{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
#div1{
  border: 1px solid blue;
  min-height:600px;
}
#div2{
  border: 1px solid green;
  min-height:400px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <title>JS Bin</title>
</head>
<body>
  
  <div class='col-md-12 col-sm-12 col-xs-12'>
    <div id='imgDiv' class='col-md-2 col-sm-3 col-xs-3'>
        <img id='myImg' style="width:100%" src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-social.png">
    </div>
    <div id='div1' class='col-md-7 col-sm-6 col-xs-6'>aaa
    </div>
    <div id='div2' class='col-md-3 col-sm-3 col-xs-3'>bbb
    </div>
</div>
  
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

使图像缩放并保持在 div 的中间

Make image scale with and stay in middle of div

html

css

vertical-alignment

twitter-bootstrap