размер изображения уменьшается при изменении размера окна - PullRequest
Новая
       38

размер изображения уменьшается при изменении размера окна

0 голосов
/ 02 февраля 2019

У меня есть изображение в макете, и когда я изменяю размер окна, его размер уменьшается и становится слишком маленьким.

Я хочу, чтобы изображение зафиксировалось в его положении и не стало меньшеи меньше, когда я уменьшаю окно.

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;

}

Смотрите этоfiddle

Когда вы уменьшаете размер окна, размер изображения уменьшается, как это исправить?

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

Вы можете просто удалить 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>
0 голосов
/ 02 февраля 2019

Вы можете установить статический размер с помощью CSS: width: 93px; height: 96px;.Вы можете применить его к div класса .image или к изображению.Вот он со встроенным 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>
...