Solved

What am I doing wrong with this graphic?

Posted on 2013-12-16
2
126 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
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 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Configuring a checkbox in CSS and php 18 94
Hide un-named HTML Label with CSS 14 36
Are these icons a web font? 3 21
How to create a table with buttons 3 21
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…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

861 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