• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Reduce Image Size (scale) for screens

Home › Community Forums › Ambition › Reduce Image Size (scale) for screens

Tagged: Ambition, Home page, images, size

  • This topic has 2 replies, 3 voices, and was last updated 4 years, 2 months ago by Rob.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 13, 2017 at 10:16 am #20858
    tribalcafe
    Customer

    I want to scale an image in proportion to different screen sizes using media queries. I’ve tried a few different approaches but haven’t got it to work. The main image is on the front 1 section.

    Is there an easy way to accomplish this.

    March 13, 2017 at 4:28 pm #20866
    Eric
    Customer

    It’s kind of already set that way, but since some background images are designed differently (different widths, different heights) you would probably have to add in custom modifications depending on the size of those images.

    You can look near the bottom of the css to see the responsive section. Here’s what you could copy and adjust –

    
    @media only screen and (max-width: 760px) {
    
    	.front-page-1,
    	.front-page-4,
    	.front-page-6 {
    		/*background-attachment: scroll;*/
    		-webkit-background-size: cover;
    		-moz-background-size:    cover;
    		background-size:         cover;
    	}
    
    }

    In that example I changed the background size from auto to cover. You can use contain, cover, and auto to have the image adjust on different browser sizes. This is what all other sites use to make background images responsive. The browsers job is to scale the image without distorting it….the best it can. There are still limits though, not every image is going to show 100% width and 100% height from end to end. It really just depends on the type of image.

    You can copy/paste that code and make any more adjustments you need to it, as well as change the browser width 760px to other screen sizes.


    I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

    November 8, 2018 at 5:25 pm #22877
    Rob
    Customer

    Excellent. I was just looking for this myself.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Reduce Image Size (scale) for screens’ is closed to new replies.

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework