Problems trimming bakcground image

Question

Problems trimming bakcground image

Navigation

#1 by (1 votes)

1

Pagina.html

<div id='resultado'></div>
       <img id="imagen1" src="http://img2.rtve.es/v/1451521/" '="" style="margin: 0px 576px 324px 0px;">
<div id='imagen'>Imagen</div>

app.js

    var margin_top= $('#imagen1').css('margin-top');
    var margin_right= $('#imagen1').css('margin-right');
    var margin_bottom= $('#imagen1').css('margin-bottom');
    var margin_left= $('#imagen1').css('margin-left'); 
    $('#imagen').css({
        'background-image':'url(http://img2.rtve.es/v/1451521/)' , 'margin-top' : margin_top+'px','margin-right' : margin_right+'px','margin-bottom' : margin_bottom+'px','margin-left' : margin_top+'px'
    });

I have several images in the code html with the same url but with different cuts ( margin ). I scroll with buttons next and previous and I want them to be displayed in the <div id="imagen"> but I do not know how to use the property background-image with margin .

jquery html css

asked by Andrés 09.08.2018 в 13:48

source

1 answer

I need to center the mirlet jquery css Creating a csv file in mysql with current date

score 1 · Answer 1

If I understand correctly, there are several things wrong with your code, starting from the fact that it is badly written, in the image the code is resulting like this:

<img id="imagen1" src="http://img2.rtve.es/v/1451521/" '=""> style="margin: 0px 576px 324px 0px;">

And it should be:

<img id="imagen1" src="http://img2.rtve.es/v/1451521/" style="margin: 0px 576px 324px 0px;">

And I do not know why you want to use margin , this property is used to generate spaces between one element and another, not to position objects.

I recommend 2 options:

Option 1: Position: Absolute; Top; Left; Right; y Bottom;
Option 2: Background-image:; Background-size; y Background-position;

Option 1

When the image must be in the html using a <img> tag, if you want to only show a fragment, you must enclose it in another container label, for example a <figure> , although you can use <div> if you want.

Something like this:

<figure id="contenedor-imagen" style="
   position: relative; 
   width: 200px;
   height: 200px;
   overflow: hidden;
   margin: 0;">
    <img src="http://picsum.photos/600/400/?image=1044" style="
         position: absolute;
         top: -100px;
         left: 0;" />
</figure>

As you can see, to the container you set its position as relative, aiding the image it contains. It is also necessary the property of overflow: hidden; that will hide everything that stands out from the container box.

From second to tag image you add the absolute position, this allows you to place it with respect to the parent container using the top, left, right y button properties.

It is not necessary to put all the css code online, it would be nice to be able to take advantage of pre-made css classes that work as you need and in js just change the position of each image, something like this:

.contenedor-imagen{
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  display: inline-block;
  margin: 0;
}

.contenedor-imagen .imagen{
  position: absolute;
}

<figure class="contenedor-imagen">
  <img id="recorte01" class="imagen" src="http://picsum.photos/800/600/?image=1044" style="top: 0; left: 0">
</figure>
<figure class="contenedor-imagen">
  <img id="recorte02" class="imagen" src="http://picsum.photos/800/600/?image=1044" style="top: -20px; left: -200px">
</figure>
<figure class="contenedor-imagen">
  <img id="recorte03" class="imagen" src="http://picsum.photos/800/600/?image=1044" style="bottom: -50px; left: -250px">
</figure>
<figure class="contenedor-imagen">
  <img id="recorte04" class="imagen" src="http://picsum.photos/800/600/?image=1044" style="bottom: -50px; right: -100px">
</figure>

Option 2

The option with background-image , which is the one I think you want to use, you have to combine it with a label <figure> , <div> or whatever you want, in theory you could use it with an empty <img> tag, but that would cause other problems, since this is used to call the image in html directly through the attribute src and what you are looking for with the property background-image is that the image is not in the html, but this call in the css and function as the background of a tag.

To use it, just combine the properties:

background-image: url ('/ img / image.jpg');
background-size: width height;
background-position: positionX postionY;

It is important to specify that by default, background-size:; is automatic, that is: background-size: auto; and this means that it will bring the image with the default size of this, now if you want to have more control, it would be good to define its size to a standard.

An example would be like this:

<figure id="contenedor-imagen" style="
   width: 200px;
   height: 200px;
   margin: 0;
   background-image: url('/img/imagen.jpg');
   background-size: 800px 600px;
   background-position: 0 -200px;
">
<figure id="contenedor-imagen02" style="
   width: 200px;
   height: 200px;
   margin: 0;
   background-image: url('/img/imagen.jpg');
   background-size: 800px 600px;
   background-position: -100px -400px;
">

Although it is better if you combine it with css, as with the previous example, the code would be cleaner without repeating so much code.

In the CSS it would be:

.imagen-recortada{
   width: 200px;
   height: 200px;
   margin: 0;
   background-size: 800px 600px;  
}

And in the HTML it would be

<figure id="imagen01" class="imagen-recortada" style="background-position: 0 -200px; background-image: url('/img/imagen01.jpg');">
<figure id="imagen02" class="imagen-recortada" style="background-position: -100px -400px; background-image: url('/img/imagen02.jpg');">

Here is a live example:

.imagen-recortada{
   display: inline-block;
   width: 200px;
   height: 200px;
   margin: 0;
   background-size: 800px 600px;  
}

<figure id="imagen01" class="imagen-recortada" style="
   background-position: 0px 0px;
   background-image: url('http://picsum.photos/800/600/?image=1044');
"></figure>

<figure id="imagen02" class="imagen-recortada" style="
   background-position: -100px -400px;
   background-image: url('http://picsum.photos/800/600/?image=1044');
"></figure>

<figure id="imagen03" class="imagen-recortada" style="
   background-position: -600px 0px;
   background-image: url('http://picsum.photos/800/600/?image=1044');
"></figure>

<figure id="imagen04" class="imagen-recortada" style="
   background-position: -300px 100%;
   background-image: url('http://picsum.photos/800/600/?image=1044');
"></figure>

Any questions, do not forget to use the comment box.