How do i resize an image based on its div width? [duplicate]

Question

I'm in the beginning stages of my 1st bootstrap site, and can't remember how to pass the document.getElementByClass("mydiv").offsetWidth to the CSS in order to dynamically scale the SVG images contained in it.

The HTML:

  <div class="col-3 col-sm-3 col-lg-3">
        <div class="panel">
            <div class="panel-heading">
                <h2 >Title</h2>
            </div> <!-- end panel-heading -->
            <a href="link.html"><img src="images/image.svg" alt="Title"></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div> <!-- end panel -->
    </div> <!-- end .col-3 .col-sm-3 .col-lg-->

The CSS:

.panel  img {
    width:  ???
}

Apologies for any posting protocol issues. Stackoverflow n00b.

Mimi · Accepted Answer · 2014-02-26 17:17:03Z

2

Since you're using a grid system, why don't you display the image as block and use width: 100% to fill the entire space of the column?

.panel  img {
    display: block;
    width: 100%;
    height: auto;
}

answered Feb 26, 2014 at 17:17

Mimi

4673 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

0ICU812 Over a year ago

I am seriously facepalming here. That was so simple! Thank you!

Felix · Accepted Answer · 2014-02-26 17:02:39Z

0

You can use width():

$('img').each(function() {
    var panelWidth = $(this).closest('.panel').width();
    $(this).width(panelWidth);
});

Actually, you can give your images a class to make the selector more specific.

answered Feb 26, 2014 at 17:02

Felix

38.2k8 gold badges45 silver badges56 bronze badges

1 Comment

Deepak Ingole Over a year ago

buddy I think ? is in css code

Coderapper · Accepted Answer · 2014-02-26 17:58:01Z

0

Also i suggest you to include max-width:100%; so that it won't go behind your div any time if you make any changes to width.

answered Feb 26, 2014 at 17:58

Coderapper

1531 silver badge10 bronze badges

Collectives™ on Stack Overflow

How do i resize an image based on its div width? [duplicate]

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related