Question

我在布局中有一个图像，当我调整窗口大小时，它的大小减小了，变得太小了。

我想使图像固定在其位置，并防止在缩小窗口时图像变得越来越小。

<div class="container-fluid" style="background-color: #333333;padding-left:30px;"> <div class="row"> <div class="col-md-12 outsidediv">  <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;

{{1}}

}

See this fiddle

缩小窗口大小时，图像大小会减小，该如何解决？

Answer 1

您可以使用CSS width: 93px; height: 96px;设置静态大小。您可以将其应用于'.image'类div或专门用于图像。这是图像标签上的内联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>

Answer 2

您只需删除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>

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

2 个答案: