comment centrer l'image lorsque le navigateur se redimensionne et rendre responsive à l'intérieur de la balise figure

Question

J'ai une balise de chiffre, je veux la rendre réactive, et je veux centrer la balise de la figure lorsque le navigateur redimensionne, j'ai l'extrait de code suivant décrit mon code, s'il vous plaît donnez-moi un peu d'aide ici. grâce

.mover2{ 
 
\t position:relative; 
 
\t left:-33%; 
 
\t top:-8%; 
 
\t width: 100%; 
 
\t height: 77%; 
 
\t display: block; 
 
} 
 

 
.arreglo2{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t display:block; 
 
} 
 

 
#mas2{ 
 
\t background: rgba(43,86,162,1.00); 
 
\t 
 
} 
 

 
figcaption.efectoimg2 p{ 
 
\t text-align: center; 
 
\t font-family: Arial; 
 
\t color:rgba(253,253,253,1.00); 
 
\t font-weight: bold; 
 
\t position:relative; 
 
\t bottom: 15px; 
 
\t font-size:100%; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 

 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/1.0/css/imagehover.min.css"> 
 

 

 
<figure class="imghvr-push-up mover2"> 
 
    <img class="arreglo2" src="https://i.imgur.com/D4fiyHr.png"> 
 
    <figcaption class="efectoimg2" id="mas2"> 
 
    <p>Atención Al Usuario</p> 
 
    </figcaption> 
 
</figure>

Answer 1

Pour obtenir ce que vous avez demandé, vous devez utiliser des requêtes des médias. Vous pouvez en apprendre davantage sur les here

Vous devez ajouter à votre code, qui va changer le style de la <figure> lorsque vous affichez sur une taille d'écran différente

@media only screen and (max-width : 1100px){ /* You can choose whichever width you want */ 
    .mover2{ 
    margin:auto; 
    left:inherit; 
    top:inherit; 
    float:none; 
    } 
} 

Voici un violon: https://jsfiddle.net/30ptcjyx/