style: volver a object-cover con los cuadros de promoción un 5% más grandes

Se revierte el object-contain del commit anterior: dejaba franjas de fondo
y se prefiere que la imagen llene el cuadro. A cambio los cuadros crecen
un 5%.

  grilla        h-24      -> h-[6.3rem]
                sm:h-36   -> sm:h-[9.45rem]
                sm:h-44   -> sm:h-[11.55rem]
  modal promo   h-64      -> h-[16.8rem]
  modal "ver todas"  250/350px -> 262/368px

Las miniaturas de subida se quedan en object-contain a propósito: ahí lo
útil es ver entera la imagen que se acaba de elegir.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro
2026-08-02 00:44:05 +00:00
co-authored by Claude Sonnet 4.6
parent e7ff4bf248
commit 7f4053ea62
5 changed files with 9 additions and 10 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -5,7 +5,7 @@
"isEntry": true
},
"resources/css/app.css": {
"file": "assets/app.c0db9522.css",
"file": "assets/app.d1255de1.css",
"src": "resources/css/app.css",
"isEntry": true
}
@@ -71,9 +71,8 @@
<div class="grid h-full place-items-center">
<div class="bg-white rounded-lg shadow-md sm:1/2 md:1/3 lg:1/3 xl:w-1/4">
{{-- PHOTO --}}
{{-- URL de runtime: no puede ser clase arbitraria de Tailwind.
bg-contain para que el banner entre completo, sin recortes. --}}
<div class="w-full bg-contain bg-no-repeat bg-center bg-gray-50 rounded-t-lg h-64"
{{-- URL de runtime: no puede ser clase arbitraria de Tailwind --}}
<div class="w-full bg-cover bg-center rounded-t-lg h-[16.8rem]"
style="background-image: url('{{ asset($this->imagen) }}');">
</div>
@@ -106,7 +106,7 @@
<div wire:click="verPromocion({{ $promocion->id }})" class="">
<img src="{{ asset($promocion->img_publicidad) }}" alt=""
class="w-full m-auto rounded-lg object-contain object-center bg-white h-24 sm:h-36 shadow">
class="w-full m-auto rounded-lg object-cover object-center h-[6.3rem] sm:h-[9.45rem] shadow">
</div>
@@ -145,7 +145,7 @@
<div wire:click="verPromocion({{ $promocion->id }})" class="">
<img src="{{ asset($promocion->img_publicidad) }}" alt=""
class="w-full m-auto rounded-lg object-contain object-center bg-white h-24 sm:h-44 shadow">
class="w-full m-auto rounded-lg object-cover object-center h-[6.3rem] sm:h-[11.55rem] shadow">
</div>
@@ -464,7 +464,7 @@
{{-- La URL sale en runtime, así que no puede ir como clase
arbitraria de Tailwind: el build no la ve y no genera
nada. Va como estilo en línea. --}}
<div class="w-full bg-contain bg-no-repeat bg-center bg-gray-50 rounded-t-lg h-64"
<div class="w-full bg-cover bg-center rounded-t-lg h-[16.8rem]"
style="background-image: url('{{ asset($this->imagen) }}');">
</div>
@@ -1124,11 +1124,11 @@
{{-- Iba con mx-4 y mx-auto a la vez: cuál ganaba dependía
del orden de las reglas, que cambió al pasar del CDN
al build. Se deja solo mx-auto, que es el que centra. --}}
<div class="cursor-pointer transition hover:scale-[1.05] w-[250px] h-[250px] sm:w-[350px] sm:h-[350px] my-2 mx-auto"
<div class="cursor-pointer transition hover:scale-[1.05] w-[262px] h-[262px] sm:w-[368px] sm:h-[368px] my-2 mx-auto"
x-on:click="categorian='{{ $categoria1->nombre }}',verPro=false">
<a href="#promo">
<img src="{{ asset($categoria1->imagen) }}"
class="w-full m-auto rounded-lg object-contain object-center bg-white h-full shadow"
class="w-full m-auto rounded-lg object-cover object-center h-full shadow"
alt="">
</a>