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:
co-authored by
Claude Sonnet 4.6
parent
e7ff4bf248
commit
7f4053ea62
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user