0

I currently have the following HTML and CSS:

HTML

<section id={styles.rowTwo} className={styles.row}>
    <h1 className={styles.rowHeaderText}>NAS Component</h1>
    <div id={styles.rowTwoContainer}>
        <div id={styles.hardwareList}>
            <h3>Hardware</h3>
            <div id={styles.componentContainer}>
                <div id={styles.componentImageContainer}>
                    <img id={styles.componentImage} src={require('../../img/ram.png')}/>
                </div>
                <p id={styles.componentText}>RAM: 16GB DDR3 1600Mhz ECC</p>
            </div>
        </div>
        <div id={styles.softwareList}>
            <h3>Software</h3>
        </div>
    </div>
</section>

CSS

.row {
    width: 100%;
    background-color: green;
    display: flex;
    flex-direction: column;
}

#rowTwoContainer {
    display: flex;
}

#hardwareList {
    width: 70%;
}

#softwareList {
    width: 30%;
}


#componentContainer {
    display: flex;
}

#componentImageContainer {
    width: 30%;
}

#componentText {
    width: 70%;
}

enter image description here

The issue is that when I resize my browser window, the image on the left does not resize. I would like it to shrink as the size of the browser window changes.

There have been numerous answers on SO that I have tried which allow the image to resize but unfortunately the image becomes stretched when the browser is at a width of 1400px (the width defined for my page).

Extra info:

There is a div that encapsulates everything shown above that has a width of 1400px.

The dimensions of the image are: 38 x 71 pixels.

Thank you for your help.

leon
  • 33
  • 4
  • Possible duplicate of [Allowing images to shrink, but not stretch](https://stackoverflow.com/questions/29831488/allowing-images-to-shrink-but-not-stretch) – showdev Jan 04 '18 at 21:18
  • @showdev I have tried the solution you linked to. I added display:block; max-width: 100%;` to my `img` but it still did not resize. – leon Jan 04 '18 at 21:28
  • How do you want it to resize? Is it possible to create a [working example](https://stackoverflow.com/help/mcve) to help demonstrate? – showdev Jan 04 '18 at 21:31
  • @showdev If you look at the 6 boxes near the bottom of the page here (https://www.bmw.com.au/), you will notice that the images shrink as you shrink the browser from right to left. I am trying to replicate similar behaviour. I hope that makes it clearer. – leon Jan 06 '18 at 22:01

3 Answers3

0

This article has helped me in the past with giving an element a background image that resizes nicely on browser resize.

https://css-tricks.com/perfect-full-page-background-image/

The main point of the article is that you can create an HTML element, set a background image on it using CSS which will resize nicely. In this case its a background image for the HTML tag but the rule should apply to other elements as well. 

html { 
  background: url('images/bg.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Akyuna Akish
  • 147
  • 1
  • 7
0

you have dynamic width size on #componentImageContainer but your image has no width property.

add some percentage of container to #componentImage :

#componentImage{
  width: 100% ;
}

Extra Info

to stop scratching image on big sizes use max-width property width "px" value :

#componentImage{
  width: 100% ;
  max-width: 200px; // for example
}
Amir Mohammad Moradi
  • 851
  • 1
  • 6
  • 14
  • When I tried adding `width: 100%; max-width:200px`, the image would resize but only to a certain extent. If I set the max-width to 50px for example, the image would not resize at all. – leon Jan 06 '18 at 06:34
0

add the following to your css 

img {
max-width:100%;
}
  • @leon, did you try to just add the CSS I posted above. I tried your code with another img and it was working well for me –  Jan 10 '18 at 21:18