Tengo esta imagen adjunta a un div JSFiddle y mi Div está dentro de un modal. Intenté mostrar de forma predeterminada el cuarto inferior izquierdo (como llenar el div) y permitir que el usuario se desplace horizontal y verticalmente para ver el resto de la imagen, pero parece que tengo algunas áreas azules y no puedo desplazarme hasta Fin de la imagen.

    imgUrl = "nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg"

    $('.img-wrapper').append($('<img id="theImg">').attr({
                    'src': 'https://' + imgUrl ,
                    'alt': 'test image'
                })
                )
.img-wrapper {
    overflow: hidden;
    height: 400px;
    background-color: blue;
    position: relative;
    overflow-x:auto;
    overflow-y:auto;
    }
    
    .img-wrapper > img {
        display: inline-block;
        height: 150%;
        width: 150%;
        position: relative;
        top: -50%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div id="myDiv" class="img-wrapper">
    </div>

¿Hay alguna forma de mostrar, cuando el modal está abierto, solo el cuarto inferior izquierdo de la imagen y permitir al usuario desplazarse XY para ver el resto?

Soy nuevo en programación HTML, así que sea amable

0
Dana 22 feb. 2018 a las 20:26

4 respuestas

La mejor respuesta

https://jsfiddle.net/2mLbhmuL/61/

Css:

.img-wrapper {
    overflow: auto; /* adds scrollbars */
    height: 400px;
    background-color: blue;
    position: relative;
}

.img-wrapper > img {
    height: 200%; /* probably looks neater if auto */
    width: 200%; /* double width image to show only first quarter */
    vertical-align: bottom; /* moves image to true text bottom */
}

Jquery

Agregue el siguiente ScrollTop (9999) al final de su JQ existente para saltar el div al fondo.

.scrollTop(99999)

Es un poco difícil codificar un gran número, pero ahorra obtener un identificador para el elemento (lo que le permitiría usar su altura real).

Nota: Se necesita vertical-align: bottom para que la imagen se muestre sin mostrar su área azul debajo. La razón de esto es que una imagen se coloca naturalmente en la línea de base del texto, por lo que el área azul que estaba viendo es el espacio para colgar letras.

1
Raith 22 feb. 2018 a las 18:15

Haces esto simple:

.img-wrapper {
    height: 400px;
    width:400px;
    background-color: blue;
    position: relative;
    overflow-x:auto;
    overflow-y:auto;
}

.img-wrapper > img {
    position: relative;
}
<div id="myDiv" class="img-wrapper">
     <img src="https://nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg" id="theImg"/>
</div>
0
Mamun 22 feb. 2018 a las 17:35

Pruebe esto: (Suposición: ajustará el tamaño de su imagen y contendrá el tamaño div según sea necesario)

Html

<div id="myDiv" class="img-wrapper">
<img src="http://nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg">
</div>

Js:

var d = $('#myDiv');
d.scrollTop(d.prop("scrollHeight"));

Css:

.img-wrapper {
    height: 400px;
    background-color: blue;
    position: relative;
    overflow-x:auto;
    overflow-y:auto;
}

.img-wrapper > img {
    display: inline-block;
    position: relative;
    border:1px solid red
}
0
kewlashu 22 feb. 2018 a las 17:46

La solución es bastante simple:

  1. No use display: inline-block; ya que colocará la imagen en línea y con un margen hacia abajo. En su lugar, use display: block

  2. top: -50%; también mueve la imagen un 50% hacia arriba, dejando en blanco su posición original

2
claudiomedina 22 feb. 2018 a las 17:43