forcing aspect on picture and profile

app/views/members/edit.html.haml

@@ -7,6 +7,7 @@
 
 .flex.justify-center.m-5.m-5.md:m-12.lg:m-20
   .flex.flex-col.text-center{class: "w-full md:w-10/12"}
+    The Picture box is landscape with ratio 3/4.
     = simple_form_for @member  do |f|
       .grid.grid-cols-1.md:grid-cols-2.gap-10
         = render "merged/form/editor" , object: @member , field: :bio, form: f
@@ -16,9 +17,9 @@
           .grid.grid-cols-2.gap-10
             = f.input :arrived
             = f.input :left
-          .flex.h-16.mt-2
-            = image_tag(@member.picture_url , class: "align-middle mr-2") if @member.picture?
-            = f.input :picture , as: :file , input_html: {wrapper_class: "w-full"},
+          .flex.h-16.mt-2.col-span-2
+            = image_tag(@member.picture_url , class: "align-middle mr-4") if @member.picture?
+            .w-full= f.input :picture , as: :file ,
             label: (@member.picture.blank? ? "Add picture" : "Change picture")
             = f.hidden_field :picture_cache
           .flex.justify-center.actions.m-10

app/views/members/index.html.haml

@@ -1,10 +1,11 @@
 = paginate @members
 
-.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-4
+.mx-20.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.2xl:grid-cols-4.gap-8.md:gap-12.lg:gap-16
   - @members.each do |member|
-    .fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10
-      =link_to member do
-        = image_for( member ,  class: "h-60 w-full object-cover")
+    .overflow-hidden.border.border-gray-100.shadow-sm
+      .h-0.overflow-hidden.relative{class: "pt-[125%]"}
+        =link_to member , class: "absolute h-60 top-0 left-0 w-full h-full" do
+          = image_for( member ,  class: "object-cover")
       %h3.pt-5.text-2xl.bg-gray-100.text-black.font-bold.text-center
         = member.name
       .p-2.text-xs.bg-gray-50.text-black.font-bold.text-center

app/views/pictures/_form.haml

@@ -1,11 +1,11 @@
 %div
   Pictures may have a small text, that will be diplayed on top of the
-  picure.
+  picure. The Picture box is landscape with ratio 3/4.
   = simple_form_for @picture do |f|
     = f.error_notification
     .flex.h-16.mt-2
       = image_tag(@picture.picture_url , class: "align-middle mr-2") if @picture.picture?
-      = f.input :picture , as: :file , input_html: {wrapper_class: "w-full"},
+      .w-full= f.input :picture , as: :file ,
       label: (@picture.picture.blank? ? "Add picture" : "Change picture")
       = f.hidden_field :picture_cache
     = f.input :text , as: :text , input_html: { rows: 2 }

app/views/pictures/_picture.haml

@@ -4,7 +4,8 @@
     .mr-2
       = distance_of_time_in_words_to_now picture.happened
       ago
-  = image_for( picture , "inset-0 h-full w-full object-fit hover:scale-105 ease-in duration-500")
+  .h-0.overflow-hidden.relative{class: "pt-[75%]"}
+    = image_for( picture , "absolute top-0 left-0 w-full h-full inset-0 object-cover hover:scale-105 ease-in duration-500")
   -unless picture.text.blank?
     .absolute.bottom-0.left-0.right-0.px-4.pb-1.bg-gray-800.opacity-70.transition-colors.group-hover:bg-black.group-hover:opacity-100
       .text-center.mt-2.text-white= picture.text

app/views/pictures/index.html.haml

@@ -5,7 +5,7 @@
   .border-r-4.mx-4
   = sort_link(@q, :created_at , class: 'flex flex-nowrap text-md')
 
-.mx-20.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.xl:grid-cols-4.gap-8.md:gap-12.lg:gap-16
+.mx-20.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.2xl:grid-cols-4.gap-8.md:gap-12.lg:gap-16
   - @pictures.each do |picture|
     = render picture , picture: picture
 

app/views/stories/_form.haml

@@ -6,7 +6,7 @@
   = f.error_notification
   .flex.h-16.mt-2
     = image_tag(@story.picture_url , class: "align-middle mr-2") if @story.picture?
-    = f.input :picture , as: :file , input_html: {wrapper_class: "w-full"},
+    .w-full= f.input :picture , as: :file , 
     label: (@story.picture.blank? ? "Add picture" : "Change picture")
     = f.hidden_field :picture_cache
   = f.input :header