如何使页面响应？

Question

我想使该网站具有移动响应能力。但是，当我添加带有文字的图片时，它会破坏其大小。我试图将图像和文本并排放置。我不知道宽度和高度应该是多少。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-6">
    <div class="box2">
      <img src="http://lorempixel.com/160/140/" align="left">
      <h3>PETER L.MARUZ </h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <img src="image/f.jpg" width="35" height="30">
      <img src="image/twitter-bird-white-on-blue.jpg" width="35" height="30">
    </div>
  </div>

sample image

1：

Answer 1

首先，请勿在HTML中使用width="..."和height="..."。如果您想让事物具有响应性，则必须使用CSS。 HTML中的所有内容实际上都是“硬编码”的，根本没有响应。

第二，如果同时固定宽度和高度，则会更改比率。您可以使用here所示的max-width和max-height来解决该次要问题。

Answer 2

玩flexbox和媒体查询：）

.flex-mobile-column {
  flex-direction: column;
}

.d-flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.flex-grow {
  flex: 1 0 50%;  
}

.p-5 {
  padding: 50px;
}

.img-300-500 {
  height: 300px;
}

@media only screen and (min-width: 900px) {
  .img-300-500 {
    height: 500px;
  }
  .flex-mobile-column {
    flex-direction: row;
  }
}

<div class="d-flex flex-mobile-column p-5">
  <div class="d-flex flex-grow justify-center align-center">
      <img src="https://via.placeholder.com/1000x1000" alt="img" class="img-300-500" />
  </div>
  <div class="d-flex flex-grow justify-center">
    <p>Nulla facilisi. Phasellus commodo maximus eros. Nullam in orci porta, porttitor arcu non, scelerisque mi. Duis ut leo porttitor, fermentum tortor in, consectetur mauris. Nunc nunc neque, rutrum id vehicula eget, volutpat vitae risus. Mauris sed maximus dolor. Phasellus nec ornare arcu. Ut sollicitudin mauris in arcu laoreet, sed laoreet ligula blandit. Nam hendrerit erat eu laoreet eleifend.</p>
  </div>
</div>

以全屏模式查看上面的代码片段，以查看在高分辨率显示屏上查看时的布局。另一方面，似乎您正在使用引导程序。它应该为您提供足够的flexbox实用程序，它们是响应式设计所需的。

此外，这里还有一个pen。我制作的示例看起来不像您给出的布局。但是，它将为您提供有关如何实现所需的想法：)

Answer 3

代替

<div class="col-md-6">

单独使用不会帮助您，您必须使用

<div class="col-sd-6 col-md-6 col-lg-6">
</div>

也。尝试在percentage中使用，例如：

<img src="image/p1.jpg" width="30%" height="35%"  align="left" >

百分比将根据屏幕自动调整图像。 但是您必须反复尝试才能在所有屏幕上正常检查更改。

如果您在某些时候被％卡住，也尝试使用“媒体查询”。如果您还有其他疑问，可以发表评论。

如果此答案帮助您正确购票

Answer 4

删除主图像的所有宽度，并使用“ img响应”类。

由于您使用的是引导程序，请尝试以下

<div class='col-md-6 col-sm-6 col-xs-12'>
<div class='row'>
<div class='col-xs-6'>
<p>   <img src="image/p1.jpg" class='img-responsive'></p>
<p> 
<img src="image/f.jpg" width="35" height="30" >
                          <img src="image/twitter-bird-white-on-blue.jpg" width="35" height="30" > 
</p>
</div>
<div class='col-xs-6'>
<h3>PETER L.MARUZ </h3>
                          <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                              </p>
</div>
</div></div>

对于图标，您可以使用外部样式