响应div中的图像

时间：2016-10-07 09:37:17

标签： css css3

以下是我的问题代码：http://codepen.io/Golgota/pen/gwvGGj

我的CSS：

.bloc {
  background-color:white;
  float:left;
  width:100%;
  margin: 10px;
  padding: 10px;
  height: 500px;
}

img {
  max-width:100%;
  max-height:100%;
}

@media all and (min-width: 40em) {
  .bloc {
    float: left;
    width: 31%;
    margin: 10px;
    height: 500px;
  }
}

我有3个响应div .bloc我想让它们处于同一高度。问题来自具有不同尺寸的图像。

有没有办法让3 .bloc具有相同的高度而不更改图像＆＃39;分辨率还是滚动？

干杯！

3 个答案:

答案 0 :(得分：1)

您可以使用ates，但请先检查支持，

你可以这样做，

body {
  background-color: orange;
  padding: 5%;
  margin: auto;
  box-sizing: border-box;
}
.block-holder .bloc {
  background-color: white;
  float: left;
  width: 32.66%;
  padding: 10px;
  height: 100%;
  margin: 0;
}
.block-holder .bloc:not(:first-child):not(:last-child){
  margin: 0 1%;
}
img {
  width: 100%;
  height: 50vh;
  object-fit: cover;
}
*, *:before, *:after {
  box-sizing: border-box;
}
<div class="block-holder">
  <div class="bloc">
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg">
    <h2>Lorem ipsum</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
      <p>
  </div>
  <div class="bloc">
    <img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg" />
    <h2>Lorem ipsum</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
      <p>
  </div>
  <div class="bloc">
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" />
    <h2>Lorem ipsum</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
      <p>
  </div>
</div>

答案 1 :(得分：1)

＆＃13;
＆＃13; 
/* item styles */
.item-image {
  position: relative;
  overflow: hidden;
  padding-bottom: 50%;
   border: 1px solid #ddd;
}
.item-image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.item-content {
  padding: 15px;
  background: #72cffa;
}
.item-text {
  position: relative;
  overflow: hidden;
  height: 100px;
}

/* centering styles for jsbin */
html,
body {
  width: 100%;
  height: 100%;
}
html {
  display: table;
}
body {
  display: table-cell;
  vertical-align: middle;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Css aspect ratio to have images of same height</title>
  <meta name="description" content="Css aspect ratio to have images of same height">
  <!-- include bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>

  <div class="container">
    <div class="row">
      
      <div class="col-xs-4 col-sm-4">
        <div class="item-image">
          <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" class="img-responsive">
        </div>
        <div class="item-content">
          <div class="item-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>
      
      <div class="col-xs-4 col-sm-4">
        <div class="item-image">
          <img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg" class="img-responsive">
        </div>
        <div class="item-content">
          <div class="item-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>
      
      <div class="col-xs-4 col-sm-4">
        <div class="item-image">
          <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" class="img-responsive">
        </div>
        <div class="item-content">
          <div class="item-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec velit nulla. Cras finibus mollis dolor, ac rhoncus diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin gravida iaculis orci eget malesuada. Morbi pulvinar, purus sit amet porta laoreet, quam orci fermentum leo, in interdum ligula elit id magna. Nam justo massa, ultrices eget dictum vitae, porttitor eget eros. 
          </div>
        </div>
      </div>
      
    </div>
  </div>

  
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

试试这个。我刚刚将图片min-height更改为像素而不是％。

body {
  background-color:orange;
  padding: 5%;
  margin:auto;
}

.bloc {
  background-color:white;
  float:left;
  width:100%;
  margin: 10px;
  padding: 10px;
  height: 500px;
}

img {
  max-width:100%;
  min-height: 270px;
}

@media all and (min-width: 40em) {
  .bloc {
    float: left;
    width: 31%;
    margin: 10px;
    height: 500px;
  }
}
<div class="bloc">
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg">
  <h2>Lorem ipsum</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
  <p>
</div>
<div class="bloc">
  <img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg"/>
   <h2>Lorem ipsum</h2>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
    <p>
</div>
<div class="bloc">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg"/>
   <h2>Lorem ipsum</h2>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
    <p>
</div>

相关问题
最新问题