smarttechy smarttechy - 1 month ago 7
HTML Question

Image getting shrink and display in middle of screen

Here the image is getting very small. and i also want to align image in centre .pLEASE tell some solution so that image is in centre and is shown in original size. I'm using bootstrap.



<div class="container" style="height: 100%;">

<div class="col-sm-4 col-md-4 col-lg-4"></div>
<div class="col-sm-4 col-lg-4" style="height: 100%;display: table;">

<a href="machine1.php" style="display : table-cell;vertical-align: middle;">

<img src="ft/text.png" class="img-responsive" style="min-width:660px;">
</a>

</div>
<div class="col-sm-4 col-md-4 col-lg-4 ">



</div>





.body-wrapper {
background: url('slide2_2.png');
background-size: cover;
height:100%;
}
html, body{
height:100%;
margin:0;
padding:0;
color:white;
}

a:hover{
text-decoration: none;
}

.img-responsive{
float: left;
}


Wnat imag to be in vertcal and horizontal centre and image size is 1366* 635

Answer

https://jsfiddle.net/ws4n0kh0/

try this.

<div class="container" style="height: 100%;">
  <div class="col-sm-4 col-md-4 col-lg-4"></div>
  <div class="col-sm-4 col-lg-4" style="height: 100%;display: table; width:100%">
    <a href="machine1.php" style="display:table-cell;vertical-align: middle;text-align: center;">
      <img src="https://www.cs.cmu.edu/~chuck/lennapg/len_std.jpg">
    </a>
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4 ">
</div>

Also removed img-responsive from CSS.

Comments