Show part of the image and visualize it all when clicking

Question

Show part of the image and visualize it all when clicking

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have this screen

What I want to do is show only a piece of the image, as 50% of the height shown now is the one I want to cut and when the user clicks on the image that opens up as well as on a modal.

I'm just learning boostrap and what I have 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 crushed, what I'm looking for is that it comes out cropped. Any ideas?

jquery html css bootstrap

asked by user2930137 25.08.2017 в 22:52

source

2 answers

0

You need to work with the div that surrounds it, for example:

.col-xs-3{
  max-height: 50px; 
  overflow: hidden
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div class="col-xs-3">
        <img src="http://static.panoramio.com/photos/large/23256855.jpg" class="img-thumbnail">
    </div>
    <div class="col-xs-9">
        <select>
            <option>Seleccione una opción</option>
        </select>
    </div>
</div>

I have changed the col-lg for col-xs for the example. Now you just have to put a listener so that when you click open the modal, that with bootstrap you have it done;)

answered by 25.08.2017 в 23:13

Jquery Selector Unable to convert String to Double

score 1 · Accepted Answer

I'll give you two simple solutions, one for CSS and one with JS (jquey)

CSS

The .class property: active , this is activated when you leave the click pressed and as long as you hold it down, once you release the click it returns to the property it originally has.

.col-lg-3 {
  max-height: 50px;
  overflow: hidden
}

.col-lg-3:active {
  max-height: 100%;
  overflow: hidden
}

<div class="row">
  <div class="col-lg-3">
    <img src="https://misanimales.com/wp-content/uploads/2014/12/gato-enfermo.jpg" class="img-thumbnail">
  </div>
  <div class="col-lg-9">
    <select>
        <option>Seleccione una opción</option>
        </select>
  </div>
</div>

JS

$(".col-lg-3").on('click', function() {
  if ($(this).css("max-height") == "100%")
    $(this).css("max-height", "50px");
  else
    $(this).css("max-height", "100%");
})

.col-lg-3 {
  max-height: 100px;
  overflow: hidden
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3">
  <img src="https://misanimales.com/wp-content/uploads/2014/12/gato-enfermo.jpg" class="img-thumbnail">
</div>
<div class="col-lg-9">
  <select>
    <option>Seleccione una opción</option>
  </select>
</div>
</div>

You should already play with the size of the container or the elements and modify them as you wish.