CODEWITHSUNDEEP
cssimageresponsive-design
H. Ferrence
H. Ferrence

Reputation: 8106

How to make a graphic image responsive in css

I am having difficulty getting a graphic to behave in responsive design.

The graphic in question is the main image below the menu bar at http://bit.ly/1waPylP

HTML

There is no width attribute on my graphic.

<div class="gc-responsive-div">
<img class="aligncenter size-full wp-image-28 gc-responsive-img" src="/wp-content/uploads/sites/8/2014/12/G_HOME.png" alt="Gotham Communications Buttons Graphic" />
</div>

CSS (added as the very last settings in the cascade)

I am trying to force the image to a max-width of 100%:

div.gc-responsive-div,
img.gc-responsive-img {
  max-width: 100% !important;
}

My Expectation

I want the main image to adjust to the viewport's size by shrinking in a responsive fashion width-wise & height-wise versus remaining at the graphic's natural height and width which is overflowing outside the viewpoint. When I view the home page in my large screen monitor, the main graphic (natural width=663px and natural height=616px) appears as designed. Yet when I look at the home page on my iphone the main graphic appears in its original natural width and height to the right of the screen and about 80% of the graphic shows off screen and can't be seen.

To me, responsive means that the graphic shrinks to properly consume the viewpoint and have its aspect ratio adjust to the viewport.

I can't get it to work. What am I doing wrong here?

Screen Shots

Large Screen Monitor (looks as designed)

enter image description here

Mobile Device (graphic does not resize)

enter image description here

Thanks.

Upvotes: 2

Views: 1885

Answers (2)

Stickers
Stickers

Reputation: 78676

The HTML/CSS code all seems to be fine. Most likely there is fixed width set on one/more of the container elements, find it and add/change it to max-width too, or adjust it in the media queries if necessary.

Also make sure to have <meta name="viewport" content="width=device-width,initial-scale=1"> or similar responsive meta tags to be set.

Upvotes: 1

dakab
dakab

Reputation: 5875

You could set the graphic as a background-image and add the property background-size:contain to the image container. This will automatically stretch the entire graphic (maintaining aspect ratio) inside the container. Then, if you want your image container to adjust to the viewport, you can use viewport units on it, like setting width:50vmin;height:50vmin;.

Upvotes: 0

Related Questions