What I want to do is show only a piece of the image, like 50% of the height that is shown now is the one I want to crop and when the user clicks on the image it opens completely as well as in a modal.
I'm just learning bootstrap and what I have for code is this:
<div class="row">
<div class="col-lg-3">
<img src="./img/muestra.jpg" class="img-thumbnail">
</div>
<div class="col-lg-9">
<select>
<option>Seleccione una opción</option>
</select>
</div>
</div>
If I put a fixed height, the image is squashed, what I'm looking for is that it comes out cropped. Any ideas?
I'm going to give you two simple solutions, one with CSS and one with JS (jquey)
CSS
JS
You need to work with the div that wraps it, for example:
I have changed the
col-lg
bycol-xs
for the example. Now you just have to put a listener so that when you click it, the modal opens, which you have done with bootstrap ;)