Question

我正在尝试创建一个两列的部分：

列具有相同的宽度（响应）
块的高度由左列中包含的图像高度定义，延伸至其父级的100％。
在右栏中有几个元素，其中一个元素是包含图像的链接。

我希望与上一段中的图像链接以缩小包含原始图像宽高比的高度，而不会在图像具有纵向方向时拉伸它的容器。

不确定它是否可以使用纯CSS。尝试使用flexbox和网格布局，但我必须遗漏一些东西。

我准备了一个小提琴：https://jsfiddle.net/Kuznets/8u6c70ku/3/

* { box-sizing: border-box }
.wrap { max-width: 80%; margin: 0 auto; }
.container { display: flex; }
.left, .right { 
  flex: 0 0 50%; 
  border: 1px solid black;
}
.left {
  position: relative;
  display: flex;
  align-items: flex-end;
}
.left div.left-text {
  position: absolute;  
  color: white;
  padding: 1em;
  font-size: 200%;
}
.should-set-height {
  width: 100%;
}

.right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:space-between;
}

<div class="wrap">
  <div class="container">
    <div class="left">
      <img class="should-set-height" src="https://dummyimage.com/200x240/aaaaaa/ffffff" alt="">
      <div class="left-text">
        This is a beautiful slogan
      </div>
    </div><!--/.left-->
    <div class="right">
      <header>Product title</header>
      <a class="fit-height" href="javascript:void(0)">
        <img class="should-shrink" src="https://dummyimage.com/200x400/aaaaaa/ffffff">
      </a>
      <div class="price">$ 19.99</div>
      <button class="button-black">Add to basket</button>    
    </div><!--/.right-->
  </div><!--/.containter-->
</div><!--/.wrap-->

Answer 1

您可以实现此目的的一种方法是将左图像设置为width: 100%, height: auto;，然后使用背景图像作为正确的容器。

以下是CodePen的快速演示：https://codepen.io/patriziosotgiu/pen/NaBmZe?editors=1100

您还可以添加额外的规则，例如左列的min-width，或者将这些列放在一列中以供移动使用。

注意：我假设左图像大于200x240px

使图像缩小到可用高度而不扩展其父级

1 个答案: