jquery - jquery 或 CSS 的函数可以动态地将图像和文本调整为浏览器的宽度和/或高度并保持纵横比？

Question

我希望通过浏览器宽度和/或高度动态调整 div 的大小并保持纵横比。如果可能的话，也让 div 内的文本也这样做。任何事情都会很棒！

标签： jqueryhtmlcss

Answer 1

你追求的是这样的东西吗？

.staticSize {
  border: 3px solid black;
  min-height: 400px;
  height: 400px;
  min-width: 400px;
  width: 400px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.staticSize * {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

<div class="staticSize">
    <h1>
    A heading
    </h1>
    <img src="http://writingexercises.co.uk/images2/randomimage/boat.jpg" width=350/>
    <label>A description of above. Wow, such description. Very descriptive. More text.
    More text. More text. More text. More text. More text. More text. More text. 
    More text. More text. More text. More text. More text. More text. More text. </label>
</div>

使用min-witdth, min-height,您可以在某种程度上强制内容保持相同height的width大小 - 但是里面的文本仍然会受到浏览器驱动的缩放功能的影响。

请参阅JSFiddle，以便您可以查看图像。