我想讓這個網站移動響應。但是當我把圖片和文字放在一起的時候，圖片的尺寸變小了。我試著把圖片和文字放在身邊。我不能理解寬度和高度應該是多少。

<link rel="stylesheet" >

<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>

試用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>

第一，不要用width= " ... "還有身高= "……"在你的HTML中。如果你想讓事情有反應，你必須使用CSS。HTML中的一切實際上都是“硬編碼”的，根本沒有響應性。

第二，如果你固定寬度和高度，它會改變比例。您可以使用這里介紹的最大寬度和最大高度來解決第二個問題。

而不是使用

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

光靠自己是幫不了你的，你必須利用

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

還有。嘗試使用百分比，如:

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

百分比將根據屏幕自動調整您的圖像。 但是你必須點擊和嘗試很多，以檢查所有屏幕上的變化工作正常。

如果你在某些時候被%卡住了，試著玩玩“媒體查詢”。如果你有任何進一步的疑問，你可以評論。

從主圖像中移除所有寬度，并使用“img-responsive”類。

由于您使用的是引導程序，請嘗試下面的方法

<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>