CODEWITHSUNDEEP
htmlimagecss
Jeff
Jeff

Reputation: 11

Responsive Image Resize Issue

I have looked everywhere on the site and tried every method I have come across, but still am not having any luck with getting this image to be responsive and scale properly. It stays at its default size no matter what code I enter. I resize the browser and use a mobile phone emulator and it stays the same size.

HTML

<section class="image">
<div>
<img class="info" src="jewelry-large-info.png">
</div>
</section>

CSS

.image {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.info {
height: auto; 
width: auto; 
max-width: 1500px; 
max-height: 666px;
}

If anyone can help it would be very greatly appreciated, and chances are I probably have just overlooked something.

Upvotes: 1

Views: 2788

Answers (4)

Jesse
Jesse

Reputation: 986

Use em measurements

Great reading: Why Ems?

This is copied from my code, problem solved:

HTML:

<div class="logo" >
  <img id="logo" alt="My Logo" src="logo_file.png"/>
</div>

CSS:

@media only screen and (max-width: 42em) {
  div.logo {
    width: 15em;
    display:block;
    margin:auto;
    padding-top: 0.2em;
  }
  img#logo {
    width: inherit;
    max-width: 100%;
    height: auto;
  }
}

Change the em size to whatever you need.

Upvotes: 0

Lea Krause
Lea Krause

Reputation: 432

Another option that might work is to try Cloudinary's JavaScript library for automating responsive images.

First, include the Cloudinary JavaScript library in your HTML pages: 

<script
src="cloudinary-core-shrinkwrap.js" 
type="text/javascript">
</script>

set the img tag parameters

<img 
data-src="http://res.cloudinary.com/demo/image/upload/w_auto,c_scale/ 
smiling_man.jpg"   
class="cld-responsive">

and call the Cloudinary responsive method:

<script type="text/javascript">
var cl = cloudinary.Cloudinary.new({cloud_name: "demo"}); 
// replace 'demo' with your cloud name in the line above 
cl.responsive();
</script>

The responsive method looks for all images in the page that have the "cld-responsive" class name, detects the available width for the image on the page, and then updates the HTML image tags accordingly.

Take a look at their page describing this method - http://cloudinary.com/documentation/responsive_images

Upvotes: 0

user6258774
user6258774

Reputation:

In CSS, the value 'auto' is default. This doesn't modify your image's proportions in any way. In your example, you used auto for your width and height. This has the image keep its original dimensions. You can read more about this on W3Schools.

Try adding values to the width and height to how you want the image to look. Here's an example of your requested responsive image.

.image {
  height: 100%;
  width: auto;
}
<img class="image" src="http://www.bultannews.com/files/fa/news/1395/11/16/671335_664.jpg" />

Upvotes: 0

Sensoray
Sensoray

Reputation: 2420

What you need to do is give the image a width of 100% and a height of auto. This will make it stay proportional and be as wide as the parent.

Upvotes: 1

Related Questions