Website Thumbnail (Bootstrap) - html

Question

I have a web page that includes a cropped section of a full size image (thumbnail).
When the thumb is clicked it opens the full size image.
I wanted to avoid uploading a full size picture and a cropped thumbnail so I used the below class which crops the full size image.
.crop {
width: 100%;
overflow: hidden;
}
.crop img {
width: 100%;
margin: -250px 0 0 0;
}
This class gives me the crop of the full size image that I wanted but unfortunately, when I switch from full screen (PC), to mobile the proportions of the image are not kept (The image should look identical on both screens). It looks like the Div width is stretching but the height remains the same.
The full size image is w:650px by h:1000px
The code for my Div is below.
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<div class="crop">
<img src="/Images/5.png" alt="Nil">
</div>
<div class="caption" style="padding-bottom: 0px">
<h4 class="pull-right">#1</h4>
<h4>Title</h4>
</div>
</div>
</div>
Please can someone point me in the right direction?
Many thanks

Answer 1

Put your image as container background
CSS:
.Thumb-Box{
display:inline-block;
width: [your width here];
height: [your height here];
}
.Thumb-Box a{
display:inline-block;
height:100%;
width:100%;
padding:0;
margin:0;
}
HTML:
<div class="Thumb-Box" style="background: url('url');background-position: 0px 0px;"> </div>
"0px 0px" stands for what piece of the thumbnail should be seen
ex: -10px from left and -10px from top

Answer 2

try this css
div {
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
background-position: center;
}

Answer 3

You would have to generate the thumb beforehand.
you could do something like this;
<a href="http://example.com/img.jpg" taget=_blank>
<img src="http://example.com/img.thumb.jpg" />
</a>
To generate a new thumb, you would have to use some software or lib.