Question

每当窗口大小减小时，我都想增加图像大小，为此我使用了媒体查询。只要窗口大小为423，图像大小就会增加。因此我尝试使用媒体查询，但不适用于该标签。如何增加尺寸？这是我的HTML和CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style type="text/css">
    @media screen and (max-width:768px ) and (min-width: 320px)
      {
             .samyata {
              width:100px;
              height:auto;
             }

          }
  </style>
</head>
<body>
  <div class="container-fluid text-center" style="background-color:#F2F2F2"><br>
   <h3 style="text-align:left;margin-left:12%;font-family: 'Raleway';"> Explore Samyata</h3> <br><br>

   <div class="row"  id = "first" style="margin-left:7%" >
     <div class="col-sm-6">
     <img src="Assets/img/sam.png" class = "samyata"
      hspace="30" style="width:28%;height:40%;float:left;">

       <h5 style="font-family: 'Fira Sans Condensed';text-align: left;">
         Get it the way you want </h5>
         <p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis';">
         A new and effecient retail commerce platform
         and ecosystem to bring stores, shoppers and
         personal shoppers together in a geographically 
         specific, simple buying and selling experience.
       </p> 
       <a href = "#" class = "text3" 
       style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:63%;"> Explore Samayata </a>
     </div>
     <div class="col-sm-6">
     <img src="Assets/img/vahaka.png" hspace = "30" class = "vahaka" style="width:28%;height:40%;float:left;"> 

        <h5 style="font-family: 'Fira Sans Condensed';text-align: left">
         Make money as a personal shopper </h5>
         <p class="text" style="text-align:left;font-size: 13px;font-family: 'Dosis'">
         Deliver shopper purchases. 
         Be your own boss. Do it when you want.
         Get paid right away.
       </p> 
       <a href = "#" class ="text3"
       style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:70%"> Explore Vahaka </a>

    </div>

     </div><br><br>
     <div class = "row" style="margin-left:7%">
    <div class="col-sm-6" >
     <img src="Assets/img/gananam.png"  hspace = "30"  style="width:28%;height:40%;float:left;">
            <h5 style="font-family: 'Fira Sans Condensed';text-align: left;">
        Attract shoppers to your stores </h5>
         <p  class="text" style="text-align:left;font-size:13px;font-family: 'Dosis'">
             Partner with Samyata Stores 
             for a new way to make money, 
             reach new customers and deliver 
             products to your customers.</p>
       <a href = "#" class = "text3"  
       style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';
       margin-right: 63%"> Explore Gananam </a><br><br><br>


    </div>
   </div><br>
   </div>

</body>

如何应用？请帮助我解决这个问题。当窗口大小减小和增大时，我希望所有图像和文本并排显示，但是当我减小时，我希望图像中的文本部分相同。我希望所有文字都在图像的同一侧。

Answer 1

带有class =“ samyata”的img具有其样式内联（即，位于style属性中）。这将始终覆盖样式表中的样式。

解决方案：从属性中删除样式，并将其放在媒体查询上方的样式表中。

您的其他问题，即环绕在图像下方的文本，可以通过将文本放在其自身的块中并留有一个空白来解决。

.samyata, .vahaka, .gananam {
  width: 28%;
  height: 40%;
  float:left;
}

.row {
  padding-bottom: 1em;
}

.block {
  margin-left:37%;
}

.col-sm-6 h5 {
  margin-top: 0;
  font-family: 'Fira Sans Condensed';
  text-align: left;
}

@media screen and (max-width: 768px) and (min-width: 320px) {
  .samyata, .vahaka, .gananam {
    width: 100px;
    height: auto;
  }

  .block {
    margin-left:130px;
  }
}

</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid text-center" style="background-color:#F2F2F2"><br>
  <h3 style="text-align:left;margin-left:12%;font-family: 'Raleway';"> Explore Samyata</h3> <br><br>

  <div class="row" id="first" style="margin-left:7%">
    <div class="col-sm-6">
      <img src="https://i.stack.imgur.com/rblbG.jpg" class="samyata">
      <div class="block">
        <h5> Get it the way you want </h5>
        <p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis';">
           A new and effecient retail commerce platform and ecosystem to bring stores, shoppers and personal shoppers together in a geographically specific, simple buying and selling experience.
        </p>
        <a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:63%;"> Explore Samayata </a>
     </div>
    </div>
  </div>

  <div class="row" style="margin-left:7%">
    <div class="col-sm-6">
      <img src="https://i.stack.imgur.com/N3atj.jpg" class="vahaka">
      <div class="block">
        <h5> Make money as a personal shopper </h5>
        <p class="text" style="text-align:left;font-size: 13px;font-family: 'Dosis'">
           Deliver shopper purchases. Be your own boss. Do it when you want. Get paid right away.
        </p>
        <a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:70%"> Explore Vahaka </a>
      </div>
    </div>
  </div>

  <div class="row" style="margin-left:7%">
    <div class="col-sm-6">
      <img src="https://i.stack.imgur.com/TUvgC.jpg" class="gananam">
      <div class="block">
        <h5> Attract shoppers to your stores </h5>
        <p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis'">
           Partner with Samyata Stores for a new way to make money, reach new customers and deliver products to your customers.</p>
        <a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';
           margin-right: 63%"> Explore Gananam </a>
      </div>
    </div>
  </div>
</div>

此外，请勿使用hspace。不推荐使用，并且存在兼容性问题。请改用边距。

编辑：我进行了一些更改，但是我不确定它现在看起来像您想要的样子。因此，将其视为一项正在进行的工作。

如何使用媒体查询来增加图片大小

1 个答案: