0
272
ViewsRellene un div con imágenes repetidas sin cortar la última imagen
He estado tratando de repetir imágenes sin cortar las últimas imágenes, he probado el estilo de imagen de fondo normal para repetir la imagen, pero no siempre puedo obtener los resultados perfectos. He configurado la imagen de fondo en una posición de intervalo absoluto dentro de li , el intervalo tiene el 86% del li para que pueda ver un poco de la última letra.
background-image: url(https://source.unsplash.com/jTSf1xnsoCs); background-size: auto 51px;En el primer ejemplo las imágenes caben el 86% de la li porque hay suficiente espacio, pero en el segundo la imagen está recortada. como dije, he usado el estilo de imagen de fondo.
¿Hay alguna manera de ajustar el 86% o incluso el 100% de li con imágenes completas usando javascript?
Aquí hay un ejemplo https://jsfiddle.net/4cfjd10a/
2 answers
Answer question0
¿ background-repeat: space junto con background-size: contain logra lo que buscas?
De los documentos de repetición de fondo de MDN :
La imagen se repite tanto como sea posible sin recorte. La primera y la última imagen se fijan a ambos lados del elemento y los espacios en blanco se distribuyen uniformemente entre las imágenes. La propiedad background-position se ignora a menos que solo se pueda mostrar una imagen sin recortar. El único caso en el que se produce el recorte utilizando el espacio es cuando no hay suficiente espacio para mostrar una imagen.
Este ejemplo está copiado de su violín. Eliminé los tramos y el css correspondiente, y agregué la regla li a css:
ul { padding-left: 0; list-style: none; font-size: 40px; line-height: 51px; font-weight:bold } ul li { margin-bottom: 20px; } ul li a { position: relative; display: table-caption; } li a { background-image: url(https://source.unsplash.com/jTSf1xnsoCs); background-repeat: space; background-size: contain; } <ul> <li> <a href="#"> Specialized </a> </li> <li> <a href="#"> Optimized </a> </li> </ul>0
Puedo ver soluciones a su problema que no requieren JavaScript, pero dependerán de lo que signifique "perfecto" para usted. Hay 2 posibilidades que puedo ver para resolver su problema:
1. Las imágenes repetidas tienen la misma longitud Fondo Repetir Imagen de la misma longitud
Luego, simplemente configurando el ancho de tu ul li span en 170 px en lugar del 86 %. Al ver que sus elementos no responden al cambio de tamaño, el uso de un valor sólido para el ancho debería funcionar en el estilo.
2. Las imágenes repetidas deben abarcar diferentes longitudes Fondo Repetir imagen de diferente longitud Para esto, simplemente agregue una clase a su intervalo para cualquier ancho que no sea el predeterminado y establezca el ancho en consecuencia.
<ul> <li> <a href="#"> Specialized <span class="specialized"></span> </a> </li> <li> <a href="#"> Optimized <span></span> </a> </li> </ul> .specialized { width: 204px; }