Imagenes proporcionales

public/assets/scripts/home.js

@@ -75,7 +75,28 @@ let eventos = {
     $(".servicio[data-filter='" + filter + "']").addClass('active')
     eventos.current_tab = filter
   },
+  resizeThumbs: () => {
+    let thumbs = $('#eventos_cards .image img')
+    thumbs.each((i, el) => {
+      let src = $(el).attr('src')
+      if (src == '#') {
+        return
+      }
+      let w = el.width
+      let h = el.height
+      let parent = $(el).parent()
+      let r = w / h
+      if (r > 1) {
+        $(el).height(parent.height())
+        $(el).width(parent.height() * r)
+      } else {
+        $(el).width(parent.width())
+        $(el).height(parent.width() / r)
+      }
+    })
+  },
   setup: () => {
+    eventos.resizeThumbs()
     $('.servicio').click(function(e) {
       e.preventDefault()
       let filter = $(this).attr('data-filter')

public/assets/styles/evento.css

@@ -3,6 +3,11 @@
   padding-top: 3.5rem;
   padding-bottom: 3.5rem;
 }
-.image {
+#thumbs .image {
   width: 100% !important;
+  height: 7rem;
+  overflow: hidden;
+}
+#thumbs .image img {
+  max-width: none !important;
 }

public/assets/styles/home.css

@@ -90,10 +90,10 @@
 }
 #eventos .segment .image {
   height: 14rem;
+  width: 100%;
   overflow: hidden;
 }
 #eventos .segment .image img {
-  height: 100%;
   max-width: none !important;
 }
 #eventos .segment .header {