Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Banned
    Join Date
    Sep 2019
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background image scaling - maintain ratio!!

    Hi, I'm working on a WordPress site for my church, but can't figure out the featured image headers.

    The parent div is height: 55vh; and the child div (with the background image) has background-size: cover;. On smaller screens (like a phone) you only see the center portion of the image. If I change to background-size: contain; the image shows black bars on the top or sides, depending on the size of the screen.

    Is there an easy way to make the background image always fill the space without losing part of the image?

    Images are 1600 x 500. Manually set, but the theme scales/crops them to that size if they're different. This seems like it should be easy, but I mostly just copypasta CSS and do minor tweaks, so I'm lost here.

    A demo of the site's child theme can be found at Childlike Faith – An x10 WordPress Demo Site. The parent theme is Faith by i Love WP.

    Thank you!

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,165
    Thanks
    38
    Thanked 1,090 Times in 1,086 Posts
    Use media queries and different size images.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,376
    Thanks
    7
    Thanked 1,370 Times in 1,339 Posts
    It’s even simpler: just set background size to “100% 100%” and it should always be as high and wide as the container. But beware that the image will be stretched or squished if the original aspect ratio isn’t met.

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,669
    Thanks
    5
    Thanked 529 Times in 515 Posts
    Quote Originally Posted by VIPStephan View Post
    But beware that the image will be stretched or squished if the original aspect ratio isn’t met.
    ... and that's really the thing, the OP's question doesn't even make sense as they're asking to always completely fill, AND maintain the aspect ratio. Given that you don't know what the window aspect is, and both screens/windows come in different aspect ratios, maintaining a perfect fill AND aspect of the image isn't even a "thing" that's possible if you take a second to think about it.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  5. #5
    Banned
    Join Date
    Sep 2019
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by josephmonson View Post
    Hi, I'm working on a WordPress site for my church, but can't figure out the featured image headers.

    The parent div is height: 55vh; and the child div (with the background image) has background-size: cover;. On smaller screens (like a phone) you only see the center portion of the image. If I change to background-size: contain; the image shows black bars on the top or sides, depending on the size of the screen.

    Is there an easy way to make the background image always fill the space without losing part of the image?

    Images are 1600 x 500. Manually set, but the theme scales/crops them to that size if they're different. This seems like it should be easy, but I mostly just copypasta CSS and do minor tweaks, so I'm lost here.


    A demo of the site's child theme can be found at Childlike Faith – An x10 WordPress Demo Site. The parent theme is Faith by i Love WP.

    Thank you!

    my issue got solved!
    Last edited by VIPStephan; Sep 12th, 2019 at 07:45 AM. Reason: removed spam links

  6. #6
    New to the CF scene
    Join Date
    Jul 2019
    Location
    Ahmedabad
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can use media query to solve this issue. When you will use media query in your code it will run on phone perfectly.
    Refer this link and you will get best idea to do this: <a href="https://www.w3schools.com/Css/css3_mediaqueries.asp" target="_blank"> Media Query </a>


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •