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

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.

score 2 · Accepted Answer · answered Feb 26 '14 at 17:17

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 '14 at 17:17

Mimi

427
3
10

1

I am seriously facepalming here. That was so simple! Thank you! – 0ICU812 Feb 26 '14 at 17:21

score 0 · Answer 2 · answered Feb 26 '14 at 17:02

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 '14 at 17:02

Felix

36,929
7
39
54

1

buddy I think `?` is in css code – Deepak Ingole Feb 26 '14 at 17:08

score 0 · Answer 3 · answered Feb 26 '14 at 17:58

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 '14 at 17:58

Coderapper

153
1
10

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

3 Answers3