Solved

What am I doing wrong with this graphic?

Posted on 2013-12-16
2
124 Views
Last Modified: 2013-12-20
Head out to http://www.countryshowdown.com/app/NewsDisplay.php?id=514. I need the top image to resize with the dimension of the screen. Right now, on a mobile device, while the width works as far as it not bleeding beyond the perimeter of the screen, it looks like what I've got attached.

How can I manipulate the height via css so the "max-width" setting doesn't result in something that's been stretched?
photo-9.PNG
0
Comment
Question by:brucegust
2 Comments
 
LVL 8

Accepted Solution

by:
Adrian Crabtree earned 250 total points
Comment Utility
You can set the width and height 100% and set a max width. In this case it would be 600px;

width: 100%;
height: 100%;
max-width: 600px;

Open in new window

0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
Comment Utility
Bruce, while acrab's solution does work in that it resizes the image, it may not be readable or degrade as it sizes.  You might consider using media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries and use different images for different viewports.

@media (max-width: 300px) {
    img.header_image_small{display:inline}
    img.header_image_large {diplay:none}
 }
@media (min-width: 300px) {
    img.header_image_small{display:none}
    img.header_image_large {diplay:inline}
 }

<img class="header_image_small" src="https://www.countryshowdown.com/images/national_final_billboard_2013_small.jpg">
<img class="header_image_large" src="https://www.countryshowdown.com/images/national_final_billboard_2013_large.jpg">

Open in new window

0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now