Tengo una imagen de fondo para cada elemento; en este caso el tamaño de la imagen es 580x374.

Esto se está configurando en línea en el elemento li para cada uno como imagen de fondo, pero necesito establecer la altura de los elementos para que se muestre correctamente. La altura de la imagen regresó Necesito la mitad, ya que son dos imágenes en una que necesito mover la posición al pasar el mouse, pero puedo hacerlo.

Con lo que tengo un problema es obtener el ancho de los elementos, obtener el tamaño del fondo, calcular la proporción del tamaño de la imagen de fondo y establecer la altura del contenedor para mostrarlo.

También necesito que responda, por lo que se establece en la carga de la página, independientemente del tamaño de la ventana gráfica, y cambia el tamaño.

Aquí es donde he llegado hasta ahora, pero soy nueva en JS.

EJEMPLO HTML:

<ul>
<li class="collection-list-item grid-item first collection-hover">
 <a href="/collections/butterfly-sofa" data-image="//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733" style="background-image: url(&quot;//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733&quot;);">
  <div class="collection-list-hover-desc right">

    <p>Dein eigener Ruhepol in einer hektischen Welt. Der durch eine Struktur im Inneren formstabile Sitzsack vereint Komfort und Ästhetik.</p>
  </div>
  <div class="collection-list-hover-button left">
    <span class="button">Entdecken</span>
  </div>
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
 <a href="/collections/butterfly-sofa" data-image="//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733" style="background-image: url(&quot;//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733&quot;);">
  <div class="collection-list-hover-desc right">

    <p>Dein eigener Ruhepol in einer hektischen Welt. Der durch eine Struktur im Inneren formstabile Sitzsack vereint Komfort und Ästhetik.</p>
  </div>
  <div class="collection-list-hover-button left">
    <span class="button">Entdecken</span>
  </div>
</a>
</li>
<li class="collection-list-item grid-item first collection-hover">
 <a href="/collections/butterfly-sofa" data-image="//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733" style="background-image: url(&quot;//cdn.shopify.com/s/files/1/1839/7697/collections/category-panel-butterfly.jpg?v=1490985733&quot;);">
  <div class="collection-list-hover-desc right">

    <p>Dein eigener Ruhepol in einer hektischen Welt. Der durch eine Struktur im Inneren formstabile Sitzsack vereint Komfort und Ästhetik.</p>
  </div>
  <div class="collection-list-hover-button left">
    <span class="button">Entdecken</span>
  </div>
</a>
</li>
</ul>

Js:

$('.collection-hover a').each(function (index, value){
  var collection_bg_img = new Image;
  collection_bg_img.src = $(this).data('image');         
  var bgImgWidth = collection_bg_img.width;
  var bgImgHeight = collection_bg_img.height;
  var divWidth = $(this).width();
  var realImgHeight = ( bgImgHeight / bgImgWidth) * divWidth;
  var halfImage = (realImgHeight / 2);
  $(this).height(halfImage);
  //console.log(halfImage);
});

Supongo que podría establecer un ancho y una altura máximos y cambiar el ancho del ancho establecido por la ventana gráfica y ajustar la altura según la relación.

ACTUALIZACIÓN

Intenté algo como esto, aunque todavía no funcionó ... pero tal vez sea un buen enfoque, ya que sería un ancho máximo:

$('.collection-hover a').each(function() {
var maxWidth = 580; // Max width for the image
var maxHeight = 374;    // Max height for the image
var ratio = 0;  // Used for aspect ratio
var width = $(this).width();    // Current image width
var height = $(this).height();  // Current image height

// Check if the current width is larger than the max
if(width > maxWidth){
  ratio = maxWidth / width;   // get ratio for scaling image
  $(this).css("width", maxWidth); // Set new width
  $(this).css("height", height * ratio);  // Scale height based on ratio
  height = height * ratio;    // Reset height to match scaled image
}

var width = $(this).width();    // Current image width
var height = $(this).height();  // Current image height

// Check if current height is larger than max
if(height > maxHeight){
  ratio = maxHeight / height; // get ratio for scaling image
  $(this).css("height", maxHeight);   // Set new height
  $(this).css("width", width * ratio);    // Scale width based on ratio
  width = width * ratio;    // Reset width to match scaled image
}

});
0
James 1 abr. 2017 a las 04:10

2 respuestas

La mejor respuesta

Tu solo puedes :

  • abordar elementos DOM después de que el documento sea ready
  • medir el ancho de una imagen después de que se haya cargado correctamente.

Por lo tanto :

jQuery(function($) {
    function resizeBgImgContainers() {
        $('.collection-hover a').each(function() {
            var $a = $(this);
            var img = new Image();
            img.onload = function() {
                $a.height(img.height * $a.width() / img.width / 2);
            };
            img.src = $a.data('image');         
        });
    }
    $(window).on('resize', resizeBgImgContainers).trigger('resize');
});
2
Roamer-1888 1 abr. 2017 a las 02:05

Si entiendo esta pregunta correctamente, estás intentando:

  • Agregue un div a una página web, cuyo ancho es incognoscible.
  • Agregue un fondo a ese div y haga que el fondo se extienda al ancho del div.
  • Cambiar el tamaño del div a la mitad de la altura del fondo estirado

En realidad, esto se puede lograr con una combinación de etiquetas img y CSS puro.

Aquí hay un JsFiddle que demuestra que: https://jsfiddle.net/x11n48yz/1/

<div id='my-page'>
  <div class='image-holder'>
    <img src='http://cflrs.in/wp-content/uploads/2017/01/example.jpg'/>
  </div>
</div>

#my-page {
  background-color: green;
  width: 200px;
  height: 800px;
}

.image-holder {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  margin-bottom: -10%;
  overflow: hidden;
}
.image-holder img {
  width: 100%;
  height: 200%;
  position: absolute;
  left: 0;
}

.image-holder img:hover {
  bottom: 0;
}
-1
Brad Johnson 1 abr. 2017 a las 02:01