当被调整大小的窗口的图像尺寸的缩小

Posted 2021-04-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当被调整大小的窗口的图像尺寸的缩小相关的知识，希望对你有一定的参考价值。

我在布局具有图像，当我调整窗口的大小它的大小将降低，变得太小。

我想使图像固定在它的位置，并防止它变得越来越小，因为我缩小窗口。

html

<div class="container-fluid" style="background-color: #333333;padding-left:30px;">

<div class="row">
    <div class="col-md-12 outsidediv">              
          <!-- image -->
          <div class="col-md-2 col-sm-2 col-xs-2  image" >
             <img src="https://i.postimg.cc/50JVVSZF/checkk.png" style="max-width:100%;" alt="img">
          </div>


          <div class='col-md-2 col-sm-2 col-xs-2'>
              <h2 style="font-size:2rem;color:#666666;">
              <strong>
                   Some other Text alongside
              </strong></h2>    
           </div>

  </div>   

   </div>
</div>

CSS

.image{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    word-break:none;
    color:white;

}

See this fiddle

当你缩小窗口的大小，图像尺寸减小，如何解决这一问题？

答案

您可以使用CSS静态尺寸：width: 93px; height: 96px;。您可以将其应用到“图像配”类股利或特别的图像。这与图像标签上内嵌CSS：

.image{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    word-break:none;
    color:white;
}

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
    <div class="col-md-12 outsidediv">              
          <!-- image -->
          <div class="col-md-2 col-sm-2 col-xs-2  image" >
             <img src="https://i.postimg.cc/50JVVSZF/checkk.png" style="width: 93px; height: 96px;" alt="img">
          </div>


          <div class='col-md-2 col-sm-2 col-xs-2'>
              <h2 style="font-size:2rem;color:#666666;">
              <strong>
                   Some other Text alongside
              </strong></h2>    
           </div>

  </div>   

   </div>
</body>
</html>

另一答案

您可以直接删除max-size，它会停留在相同尺寸的所有时间。

.bs-example{
    	margin: 20px;
    }
    .outsidediv{
    	/*border:solid;*/
    }
    ul li{
		/*margin-left:15px;*/
		
		box-sizing: border-box;
		font-size:1.3rem;
    }
    #play{
    	margin-top:35px;
    }
   
   .image{
	   	display: flex;
	   	flex-direction: column;
	   	/*justify-content: center;*/
	   	
	   	/*font-size:2rem;*/


     	align-items: flex-start;
		word-break:none;
		color:white;

   }
   #bt{
   	margin-top:40px;
   	position: relative;
   	margin-left:30px;
   	font-size:2rem;
   }
   nav{
   	min-width: 100%;
   }
   body{
   	margin:0px;
   	padding:0px;
   }

<!DOCTYPE html>
<html lang="en">
<head>
<title>Main page</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- font awesome for the icons -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  
  <body>
  
<div class="container-fluid" style="background-color: #333333;padding-left:30px;">

	<div class="row">
        <div class="col-md-12 outsidediv">				
              <!-- image -->
              <div class="col-md-2 col-sm-2 col-xs-2  image" >
                 <img src="https://i.postimg.cc/50JVVSZF/checkk.png" alt="img">
              </div>


              <div class='col-md-2 col-sm-2 col-xs-2'>
                  <h2 style="font-size:2rem;color:#666666;">
                  <strong>
                       Some other Text alongside
                  </strong></h2>	
               </div>

      </div>   
		
  </div>
</div>
    
  </body>
  </html>

以上是关于当被调整大小的窗口的图像尺寸的缩小的主要内容，如果未能解决你的问题，请参考以下文章