Question

我是CSS新手。当我调整窗口大小时，文本和图像会混乱。我该如何解决这个问题？

HTML

ionic plugin add cordova-plugin-background-geolocation@1.0.5

CSS

<img src="images\titles_03.jpg" class="tt1" > 
<img src="images\titles_05.jpg" class="tt2" > 
<img src="images\titles_07.jpg" class="tt3" >

这不是完整的代码，但这是搞砸的部分。

Answer 1

您的图像尺寸很可能设置为图像的像素大小。尝试使用百分比来设置图像的大小。

length:15%;
width:10%;

Answer 2

您过度复杂，使用花车和百分比来表示尺寸和展示位置。

＆＃13;

img {
    margin-top: 200px; /* use margin to position from the top */
    float: left; /* Float to align the images to the left */
    width: 33%; /* 3 images / 100% = 33.3% */
    max-width: 100%; /* use max width to constrain proportions */
}

＆＃13;

<img src="http://lorempixel.com/400/200/sports/1" class="tt1" > 
<img src="http://lorempixel.com/400/200/sports/2" class="tt2" > 
<img src="http://lorempixel.com/400/200/sports/3" class="tt3" >

＆＃13;

Answer 3

当您尝试使用可重新调整大小的网站时，根据屏幕尺寸使用相似的图片和字体大小，您有2个选项：

1 - 您使用百分比定位 - 高度：30％;宽度：30％;

2 - 媒体查询 - 媒体查询由媒体类型和至少一个通过使用媒体功能（如宽度，高度和颜色）限制样式表范围的表达式组成。

缩小窗口时，文字和图像会混乱

3 个答案: