Question

柱塞：https://plnkr.co/edit/kC9SPK2e7iy5OYhKpwOO?p=preview

<html>

<head>
  <link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="m-2 ml-4" style="color: whitesmoke;">
    <div class="row text-justify">
      <div class="container">
        <div class="text-center row ml-2">
          <h1>About me</h1>
        </div>
        <article class="row single-post no-gutters">
          <div class="col">
            <div class="image-wrapper float-right pr-3">
              <img src="https://via.placeholder.com/1000" style="width:50%; margin-left: 25px; margin-right: -10px;" />
            </div>
            <div class="single-post-content-wrapper" style="text-align-last:right; padding-top: 5px;">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra nisi sed nisi tempor, non suscipit libero dictum. Vivamus gravida cursus malesuada. Pellentesque mi nulla, pharetra ut quam sed, lobortis rhoncus lectus. Cras vel augue mi. Aliquam
              vulputate dictum ex, sollicitudin tincidunt purus venenatis sed. Donec bibendum ligula eu justo auctor, ac efficitur tortor sodales. Quisque sit amet facilisis neque, sit amet volutpat velit. Sed sagittis mattis enim, vel tincidunt dui gravida
              tincidunt. Donec imperdiet sem vitae sagittis lobortis. Pellentesque semper gravida massa. Suspendisse congue ac orci ut dapibus.
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</body>

</html>

在第21行，我正在加载图像，如果我将此图像设置为设置的像素距离，则它会像应该的那样包装。但是我需要使用一个百分比，以便图像不会在较小的屏幕上消失。我需要做些什么才能使它正常工作，以使其能够响应？

编辑：我试图在此页面上运行的plunker中工作，我不知道该如何实现...

更新：我使用view-width代替％，这似乎可行，但这确实将组件限制在页面上，而不是其父页面。

Answer 1

请尝试以下代码，我认为这对您有帮助。并且您应该使用有效的引导程序类。

html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="x-ua-compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
   <script data-require="bootstrap@*" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="style.css" />
   <script src="script.js"></script>
   <style type="text/css">
      .hd-titile{color:#111;}
      .pro-img{width:200px;height:200px;margin: 21px 0px;}
      .pro-img img{width:100%;}
      .dis-txt{color:#111;}
      @media only screen and (max-width:767px) {
      .pro-img {width:100%;height:auto;}
      .hd-titile h1{font-size: 25px;margin: 15px 0px 0px;}
      }
   </style>
</head>
<body>
   <div class="" style="color:whitesmoke;">
      <div class="text-justify">
         <div class="container">
            <div class="hd-titile">
               <h1>About me</h1>
            </div>
            <article class="single-post no-gutters">
               <div class="col-md-12">
                  <div class="image-wrapper pro-img">
                     <img src="https://via.placeholder.com/1000">
                  </div>
                  <div class="single-post-content-wrapper dis-txt">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra nisi sed nisi tempor, non suscipit libero dictum. Vivamus gravida cursus malesuada. Pellentesque mi nulla, pharetra ut quam sed, lobortis rhoncus lectus. Cras vel augue mi. Aliquam
                     vulputate dictum ex, sollicitudin tincidunt purus venenatis sed. Donec bibendum ligula eu justo auctor, ac efficitur tortor sodales. Quisque sit amet facilisis neque, sit amet volutpat velit. Sed sagittis mattis enim, vel tincidunt dui gravida
                     tincidunt. Donec imperdiet sem vitae sagittis lobortis. Pellentesque semper gravida massa. Suspendisse congue ac orci ut dapibus.
                  </div>
               </div>
            </article>
         </div>
      </div>
   </div>
</body>
</html>

换行文本图像不能与响应显示一起使用

1 个答案: