From 0489695e64dcd96533e8cbd35ebba177bbd6ae11 Mon Sep 17 00:00:00 2001 From: Robin Cornett Date: Thu, 10 Jan 2019 12:34:08 -0500 Subject: [PATCH] Improve scriptless CSS --- includes/class-displayfeaturedimagegenesis-output.php | 2 +- includes/css/display-featured-image-genesis.css | 2 +- sass/display-featured-image-genesis.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/includes/class-displayfeaturedimagegenesis-output.php b/includes/class-displayfeaturedimagegenesis-output.php index 9cca4e5..4597a81 100644 --- a/includes/class-displayfeaturedimagegenesis-output.php +++ b/includes/class-displayfeaturedimagegenesis-output.php @@ -88,7 +88,7 @@ class Display_Featured_Image_Genesis_Output { * @since 2.6.0 */ public function add_inline_style() { - $css = sprintf( '.big-leader { max-height: %spx; }', $this->setting['max_height'] ); + $css = sprintf( '.big-leader, .big-leader__image img { max-height: %spx; }', $this->setting['max_height'] ); wp_add_inline_style( 'displayfeaturedimage-style', wp_strip_all_tags( $css ) ); } diff --git a/includes/css/display-featured-image-genesis.css b/includes/css/display-featured-image-genesis.css index 16535b5..249ff09 100644 --- a/includes/css/display-featured-image-genesis.css +++ b/includes/css/display-featured-image-genesis.css @@ -1 +1 @@ -.has-leader .site-inner{margin-top:0}.big-leader{overflow:hidden;max-height:600px;position:relative}.big-leader.--scriptless{height:auto}.big-leader__image img{width:100vw}.big-leader .wrap{position:absolute;right:0;bottom:0;left:0;width:100%;z-index:1}.big-leader .entry-title.featured-image-overlay,.big-leader .archive-title.featured-image-overlay{color:#fff;text-align:center}.big-leader .excerpt,.big-leader .archive-description{margin-bottom:24px;padding:24px;background:rgba(255,255,255,.85)}.big-leader p{margin-top:18px;margin-bottom:0}.home .big-leader p{margin-top:0}.home .big-leader p:last-child{margin-bottom:0}.big-leader .excerpt .entry-title,.big-leader .archive-description .archive-title{margin-bottom:0}.backstretch.no-js{max-height:600px}img.featured{max-width:100%}@media only screen and (max-width: 768px){.big-leader,.backstretch.no-js{max-height:300px}.big-leader--scriptless,.backstretch.no-js--scriptless{height:auto}} \ No newline at end of file +.has-leader .site-inner{margin-top:0}.big-leader{overflow:hidden;max-height:600px;position:relative}.big-leader.--scriptless{height:auto}.big-leader__image img{-o-object-fit:cover;object-fit:cover}.big-leader .wrap{position:absolute;right:0;bottom:0;left:0;width:100%;z-index:1}.big-leader .entry-title.featured-image-overlay,.big-leader .archive-title.featured-image-overlay{color:#fff;text-align:center}.big-leader .excerpt,.big-leader .archive-description{margin-bottom:24px;padding:24px;background:rgba(255,255,255,.85)}.big-leader p{margin-top:18px;margin-bottom:0}.home .big-leader p{margin-top:0}.home .big-leader p:last-child{margin-bottom:0}.big-leader .excerpt .entry-title,.big-leader .archive-description .archive-title{margin-bottom:0}.backstretch.no-js{max-height:600px}img.featured{max-width:100%}@media only screen and (max-width: 768px){.big-leader,.backstretch.no-js{max-height:300px}.big-leader--scriptless,.backstretch.no-js--scriptless{height:auto}} \ No newline at end of file diff --git a/sass/display-featured-image-genesis.scss b/sass/display-featured-image-genesis.scss index 4376c60..bcc803a 100644 --- a/sass/display-featured-image-genesis.scss +++ b/sass/display-featured-image-genesis.scss @@ -12,7 +12,7 @@ } &__image img { - width: 100vw; + object-fit: cover; } .wrap {