How to define width AND use max-width - html

Question

I'm wanting to make my images smaller as the window size gets smaller.
However, I have to define the size of these two images by width, yet because 'max-width' overrides 'width' then it makes the images really small? I need to use 'max-width' to resize my images. However, I have two images on the left hand side that I have used both width and max-width and its width is defined and it resizes? What am I doing wrong with the other two?
img {
width: 100%;
height: auto;
width: auto\9;
}
/* css for the two larger images on the left-hand side*/
#imageleft {
display: inline-block;
height: 30px;
}
/* css for the two smaller images on the right-hand side*/
#imageright {
display: inline-block;
width: 50px;
height: 100px;
}
<!-- large images to left -->
<div id="imageleft">
<a href="index.html">
<img src="images/photo-1464375117522-1311d6a5b81f.jpeg" alt="Guitar image" style="max-width:100%; width:600px;height:400px">
</a>
<a href="index.html">
<img src="images/photo-1470020618177-f49a96241ae7.jpeg" alt="Fire breather" style="max-width:100%; width: 300px;height: 400px">
</a>
</div>
<!-- small images to the right -->
<div id="imageright">
<a href="index.html">
<img src="images/photo-1472653431158-6364773b2a56.jpeg" alt="festival" style=" max-width: 100%; height: 200px">
</a>
<a href="index.html">
<img src="images/photo-1473396413399-6717ef7c4093.jpeg" alt="stage view" style="width:291px; max-width: 100%;height: 196px">
</a>
</div>

Answer 1

#helpme123 I really didn't get what kind of layout you desire to achieve. Could you change your post and provide an example of it, please?

Answer 2

When you use width and max-width together, it's usually because you are giving the element a width relative to its parent (or the viewport or the current font-size or the base font-size), but you also want to explicitly state an absolute width, beyond which the element should not widen.
Working Example:
div {
width: 90%;
padding: 12px;
}
.parent {
max-width: 1000px;
background-color: rgb(255,0,0);
}
.child {
max-width: 600px;
background-color: rgb(255,255,0);
}
.grandchild {
max-width: 400px;
height: 100px;
background-color: rgb(0,0,255);
}
<div class="parent">
<div class="child">
<div class="grandchild">
</div>
</div>
</div>
If you run the example in a full window and shrink the window size and then gradually grow it, you'll see that the divs each widen relative to their parent... until they reach their max-width, after which they stop widening.