Question

我有两种尺寸的图像（垂直和水平），它们总是大小相同，尊重。我正在尝试创建一个容器来保存图像，但不会将内容推到一起并保持相似的高度或宽度。我也不想显示图像的完整大小，所以我在考虑使用overflow:hidden。我在这里看到的JSFiddle中尝试了这个，但它延伸了容器。任何帮助表示赞赏。

<div>
  <span class="mixSpanLeft">
    <a href="somePlace.html"><img src="http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg" /></a>
  </span>
  <span class="mixSpanRight">
    <p>The images will always be on the left and will be only two sizes, 1000x500 or 500x1000. What is the best way to show them if they have alternating sizes?  Should I have completely different styles for them?
    </p>
  </span>
</div>

http://jsfiddle.net/hmjoLmej/4/

Answer 1

这样的事情怎么样。

我使用了更合适的flexbox代替float，这样可以更好地控制布局。

使用background添加图像，可以更好地控制缩放，剪辑等。

注意，由于p是块元素，因此它们不应该是span（内联元素）的子元素，因此我使用{{1}更新了标记/ CSS }

更新了，展示了如何在标记中添加图片来源

＆＃13;

div

＆＃13;

.wrapper {
  display: flex;
}

.mixSpanLeft {
  width: 50%;
  background-color: #abc;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.mixSpanLeft a {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.mixDivRight {
  width: 50%;
  background: #def;
}

.mixDivRight p {
  padding: 2%;
}

＆＃13;

大图像，保持右侧内容的大小

1 个答案: