[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

What am I doing wrong with this graphic?

Posted on 2013-12-16
2
Medium Priority
?
132 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 8

Accepted Solution

by:
Adrian Crabtree earned 1000 total points
ID: 39722838
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 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1000 total points
ID: 39723151
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

656 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