Question

我正在寻找一种css3响应技术，有两个并排的div（堆叠在较小的屏幕上），一个带有文本，另一个带有完整的图像。至少，必须保持图像宽高比;理想情况下，两个div应始终为相同大小的正方形（即使在堆叠时）。

编辑 - 小提琴：

https://jsfiddle.net/marekjedlinski/zdwdhLmg/

HTML：

    private void TextBox_KeyDown(object sender, KeyEventArgs e)
    {
        TextBox box = (TextBox)sender;
        if (e.KeyData == (Keys.Back | Keys.Control))
        {
            if (!box.ReadOnly && box.SelectionLength == 0)
            {
                RemoveWord(box);
            }
            e.SuppressKeyPress = true;
        }
    }

    private void RemoveWord(TextBox box)
    {
        string text = Regex.Replace(box.Text.Substring(0, box.SelectionStart), @"(^\W)?\w*\W*$", "");
        box.Text = text + box.Text.Substring(box.SelectionStart);
        box.SelectionStart = text.Length;
    }

的CSS：

<div class="outer outer-left">
    <div class="inner inner-text inner-text-left block-orange">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra lorem in ligula volutpat euismod. Nullam eu lorem tellus. Donec luctus lacus in felis blandit quis accumsan nulla imperdiet. Phasellus lorem quam, egestas et scelerisque ac, consequat nec diam. Nunc elit elit, venenatis at eleifend eget, feugiat eu elit.</p>
    </div>
    <div class="inner inner-img">
        <img src="image-1-300.jpg" />
    </div>
</div>

<div class="outer outer-right">
    <div class="inner inner-img">
        <img src="image-2-300.jpg" />
    </div>
    <div class="inner inner-text inner-text-right block-green">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra lorem in ligula volutpat euismod. Nullam eu lorem tellus. Donec luctus lacus in felis blandit quis accumsan nulla imperdiet. Phasellus lorem quam, egestas et scelerisque ac, consequat nec diam. Nunc elit elit, venenatis at eleifend eget, feugiat eu elit.</p>
    </div>
</div>

我可以使用flexbox获得一些方法。这是起点，理想情况：

然而，当浏览器窗口增长时，图像会被拉伸：

至少，我希望保持宽高比。如果图像被剪裁是可以的，但理想情况下我希望正方形增长为正方形（图像和文本），以便按比例调整图像大小。

现在，当水平空间缩小并且div堆叠时，图像再次被拉伸：

在这里，我仍然希望图像div和文本div保持完美的正方形，但至少必须保持纵横比

理想情况下，像这样：

我可以使用flexbox或任何早期的技术，但我需要这是相当兼容的，而不是前沿的（例如，对象适合似乎太过期待）。

有类似的问题here和here，它们接近，但是（不解决这个具体问题。）

Answer 1

编辑 ??你的fiddle工作正常吗？！

如果背景和物体贴合不是答案，并且你想使用flex，我相信最好是从方形图像和中心内容开始。

您可以使用mediaquery切换div的显示行为并重置顺序。

<强> here is an example

＆＃13;

/* ================================== */ 
/* DEMO USING A SINGLE FLEX CONTAINER */ 
/* ================================== */ 
/* use your own tags, class and sizes */ 
/* ================================== */ 
div {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  min-width: 300px;
  max-width: 800px;
  margin: auto;
}
div > * {
  flex: 1 1 340px;
  min-width: 50%;
}
div > div {
  background: green;
  display:flex;
  align-items:center;
  padding: 1em;
  margin: 0;
  box-sizing: border-box;
  color:white;
}
div div:first-of-type {
  order: -1;
  background:rgb(148, 98, 39);
}
div:before {
  content: "";
  display:inline-block;
  vertical-align:middle;
  padding-top: 100%;
  width:0;
}
div p {
  display:inline-block;
  vertical-align:middle;
  max-width:99%;
}
@media screen and (max-width:866px) {
  div div , div div:first-of-type {display:block;order:0;}
}

＆＃13;

<div>
  <img src="http://lorempixel.com/300/300/cats">
  <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p></div>
  <img src="http://lorempixel.com/300/300/animals">
  <div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p></div>
</div>

＆＃13;

用响应的方式用图像填充div

1 个答案: