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 align this div to appear on right most side of webpage?

    How to Achieve Word Wrap Effect With Children Divs

    How to include LESS files in web page using Web Essentials?

    How to load an image with css using Django

    How to change the CSS of page dynamically based on value?

    How to put button next to Image in CSS?

    Table border not showing up

    background image shows up on right-click show image, but not on webpage

    How do I remove an extra overlay layer on p element?

    I made a webpage but have excess white space at the bottom, how do I get rid of this?

    How can i refer to all of my tags in CSS?

    CSS - Get image to show text overlayed on top of the image on hover?

    How to add custom css in Cognos?

    how to override unselectable=“on” with css in IE10?

    DOM: How to set element width based on iterator value and call a function on mouseover?

    How to stop my css declaration from being overridden

    How to change the look of a timer in javascript, css?

    How to shift a background image with css

    How to put four images 2x2 on other image as background, CSS?

    How to align image next to text and then stack them (responsive)

    What is the purpose of this csslint error and how can I get rid of it?

    how to override the placeholder icons în AEM 6?

    How to style using d3's .style() method instead of using CSS in style tags for .axis path {}?

    jQuery: How to check if an element exists and change css property

    How to hover over the whole button in css

    HTML/CSS - How to get label inside form to animate?

    How to add all li of existing ul to the bottom of another ul base on their css classes

    How can I get gradients working in IE9?

    How to get css property value in pure javascript

    css how to select a class in another div