Question

当我调整浏览器大小时，我希望我的flexbox内容能够改变大小（即文字和图像按比例缩小）。

在flexbox中，我有两个元素：左边是一些文字，右边是图片。

<div id="flexbox">
    <div id="text">
        Some text
    </div>
    <img src="images/img.png" alt="" id="image" width="400px" height="414px">
</div>

#flexbox {
    background-image:url("images/board.png");
    width:100%;
    display:flex;
    flex-flow:row no-wrap;
    justify-content:space-between;
}

#text {
    margin-left:10%;
    width:40%;
}

#image {
    margin-right:10%;
}

现在，字体大小和图像大小保持不变，因此当我调整浏览器大小时，图像最终会被切断，文本会垂直展开。

Answer 1

您需要响应式设计。从本质上讲，响应式设计是一种使网页在任何浏览器或设备中都看起来很好的方法。如果您想使图像按比例缩小，则需要将其width和height设置为其容器的特定百分比，另一方面应该是其容器的百分比等等。稍微更难以使文本缩小或放大窗口大小更改，因为您需要媒体查询。

阅读this教程以了解响应式设计，并点击下一章几次，以确保您阅读有关该主题的足够资料。根据您根据自己的品味和需求定义的具体案例，使用media queries设置font-size属性。

Answer 2

检查此DEMO

#flexbox { 
display: flex;
margin: 5%;
}

#text { 
font-size: 10vw; 
}

#image { 
height: 40vw;
width :40vw;
}

<div id="flexbox">
    <div id="text">Some text</div>
   <img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Dell_Logo.png" id="image" width="400" height="414" alt="">
</div>

浏览器宽度更改时调整flexbox的内容大小

2 个答案: