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


Tags: jquery,html,css,twitter-bootstrap,svg

Problem :

This question already has an answer here:

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.



Solution :

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;
}

    CSS Howto..

    How to change or disable the alternating background colors in Google Prettify

    How to check conditional in CSS?

    How to bottom align a title of variable length

    In HTML, how can I wrap a word at . (dot), just like it wraps at - (dash)?

    How to disable a css rule for a wordpress plugin

    How to force style HTML element?

    a[title] not showing expected result [closed]

    How to link Body/Html Backgrounds with CSS in Ipad/Iphone (safari)

    Jquery/CSS, how to have and access multiple (left) panels, while adjusting main content container automatically

    Big Cartel - Slideshow Questions

    HTML & CSS: How do I completely remove the scroll-bars on the side of
    ?

    CSS - How to crop an image to a square, if it's already square then resize it

    How to float 3 divs with margin left & right 0px?

    CSS: How to change class style if another style is hover

    Bootstrap: How to obtain plain border in input field?

    How to get the “declared” CSS value, not the computed CSS value

    I have a simple image picture slider with JQuery, but I do not know how to animate up or down

    How to resize div with CSS by the border

    How do I convert HTML to inline CSS in Google AppEngine?

    How to revise the css transitions with a delay

    How can I make a div with “position:fixed” to stay out of the screen if the window overflows?

    How can I have multiple jQuery button styles on one page?

    How to create this material design background (see image below) with CSS?

    how to create a vertical menu in html/css [closed]

    Google Share button not showing properly if originaly hidden

    How to set only vertical padding?

    How can I toggle between multiple .css with jquery?

    How to stop user agent stylesheets from overriding my css

    How to call the event of one element in another element in JQuery

    How do I put several elements on the second row in a div