<img/>在Flexbox中的高度，具有动态宽度

时间：2018-08-02 11:14:21

标签： html css 

.flex {
    display: flex;
    align-items: stretch;
}
.dblCol {
    border: 1px solid #999;
    flex-grow: 2;
    min-width: 0;
    padding: 0 10px;
}
.sglCol {
    border: 1px solid #999;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 10px;
}

img {
  max-width: 100%;
  width: 100%;
  height: 150px; /* height can be fix */
}


/* surrounding styles */
body {
  background-color: #ccc;
}
.content {
  width: 1000px;
  margin: 0 auto;
}
.app {
    position: relative;
    background-color: #fff;
    padding: 30px 40px 40px;
    margin-bottom: 30px;
}
<div class="content"> 
  <div class="app">
    <div class="flex">
      <div class="dblCol">
        <h3>Teaser #1</h3>
        <img src="https://assets9.domestika.org/project-items/001/654/589/lorem_vector-big.png?1467128294" />
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sglCol">
        <h3>Teaser #2</h3>
        <img src="https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg"/>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
      </div>
    </div>
  </div>
</div>

我正在使用flexbox宽度的相对宽度。在这种情况下，右列的宽度为33％，左列的长度一直延伸到剩余空间。

现在这些列中的图像应以相同的高度显示。这可以是固定的像素高度。但是图片的宽度应该拉伸到100％，但不会破坏其比例。因此，我要尝试实现的是一种尽可能仅显示图像中心部分的方法，如下所示。

错误： enter image description here

好： enter image description here

这可以用CSS完成吗？如果是，那么提示会很棒。

5 个答案:

答案 0 :(得分：3)

尝试这个object-fit

我应该已经说过IE不支持它。

我将图像image-1添加到了图像，然后在CSS中添加了属性object-fit: none 

.flex {
    display: flex;
    align-items: stretch;
}
.dblCol {
    border: 1px solid #999;
    flex-grow: 2;
    min-width: 0;
    padding: 0 10px;
}
.sglCol {
    border: 1px solid #999;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 10px;
}

img {
  max-width: 100%;
  width: 100%;
  height: 150px; /* height can be fix */
}

.image-1 {
  object-fit: none; /* ------ attribute add ------ */
}

/* surrounding styles */
body {
  background-color: #ccc;
}
.content {
  width: 1000px;
  margin: 0 auto;
}
.app {
    position: relative;
    background-color: #fff;
    padding: 30px 40px 40px;
    margin-bottom: 30px;
}
<div class="content"> 
  <div class="app">
    <div class="flex">
      <div class="dblCol">
        <h3>Teaser #1</h3>
        <img src="https://assets9.domestika.org/project-items/001/654/589/lorem_vector-big.png?1467128294" class="image-1" />
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sglCol">
        <h3>Teaser #2</h3>
        <img src="https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg"/>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

使用div作为背景并为其提供背景图片

     .image-container {
       background: your_image;
       background-size: contain;
       height: 60px; //whatever you see fit
       background-position: center;
     }

我认为这将对您有用，因为图像将难以处理

答案 2 :(得分：0)

可以使用隐藏了溢出的包装容器轻松完成此操作：

.wrapper{
    overflow:hidden;
    /*other style there to give it the needed size*/
 }
.wrapper > img{
    width:100%;
 }

然后是html：

<div class="my-item">
    <div class="wrapper"><img src="my/path.jpg"></div>
</div>

它应该起作用，因为您的图片将获得与包装纸相同的宽度，并且因为它不限制其高度。

答案 3 :(得分：0)

使用object-fit: none;到img 

.flex {
    display: flex;
    align-items: stretch;
}
.dblCol {
    border: 1px solid #999;
    flex-grow: 2;
    min-width: 0;
    padding: 0 10px;
}
.sglCol {
    border: 1px solid #999;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 10px;
}

img {
  max-width: 100%;
  width: 100%;
  height: 150px; /* height can be fix */
 object-fit: none;
}


/* surrounding styles */
body {
  background-color: #ccc;
}
.content {
  width: 1000px;
  margin: 0 auto;
}
.app {
    position: relative;
    background-color: #fff;
    padding: 30px 40px 40px;
    margin-bottom: 30px;
}
<div class="content"> 
  <div class="app">
    <div class="flex">
      <div class="dblCol">
        <h3>Teaser #1</h3>
        <img src="https://assets9.domestika.org/project-items/001/654/589/lorem_vector-big.png?1467128294" />
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sglCol">
        <h3>Teaser #2</h3>
        <img src="https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg" />
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
      </div>
    </div>
  </div>
</div>

答案 4 :(得分：0)

（从我的角度来看）最好的方法是将图像查看为background-image。

首先将<img>标记更改为<div>标记，然后添加所需的CSS。

.flex {
    display: flex;
    align-items: stretch;
}
.dblCol {
    border: 1px solid #999;
    flex-grow: 2;
    min-width: 0;
    padding: 0 10px;
}
.sglCol {
    border: 1px solid #999;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 10px;
}

img {
  max-width: 100%;
  width: 100%;
  height: 150px; /* height can be fix */
}
div.img {
    background-image: url(https://assets9.domestika.org/project-items/001/654/589/lorem_vector-big.png?1467128294);
    height: 150px;
    background-size: cover;
    background-position: 50%; /* you can put the position you want */
}

/* surrounding styles */
body {
  background-color: #ccc;
}
.content {
  width: 1000px;
  margin: 0 auto;
}
.app {
    position: relative;
    background-color: #fff;
    padding: 30px 40px 40px;
    margin-bottom: 30px;
}
<div class="content"> 
  <div class="app">
    <div class="flex">
      <div class="dblCol">
        <h3>Teaser #1</h3>
        <div class="img"></div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sglCol">
        <h3>Teaser #2</h3>
        <img src="https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg"/>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题