Image getting shrink and display in middle of screen - html

Question

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 1

I am not sure what you want here
Try this if you want the image in the center
https://jsfiddle.net/0fcpr65u/4/
<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="text-align:center">
<a href="machine1.php">
<img src="http://webneel.com/wallpaper/sites/default/files/images/01-2014/2-flower-wallpaper.preview.jpg" class="img-responsive" style="width:200px;margin: auto;">
</a>
</div>
</div>
remove float from the image css
EDIT:
I f you want it to be at the center of the page
add width & height to parent div make there position relative
Add this to the image
width: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
or you can use vertically-align property by using display:table
If you want the original size of the image use 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="http://webneel.com/wallpaper/sites/default/files/images/01-2014/2-flower-wallpaper.preview.jpg">
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 ">
</div>
Else use flex
by adding this css in parent div
.parent {
display: flex;
justify-content: center;
align-items: center;
}

Answer 2

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.