While working on my website, I noticed that when I zoom out on my browser, everything resizes except for the image. The image remains the same size regardless of whether the browser is set at 100% or 50%. Is there a way to code the image so that it resizes according to the browser's zoom level?
This website is built using HTML5, CSS, and JavaScript. The image is rendered using JavaScript.
function get_attrs() {
// change the avatar as needed
if (convStyle == 'dominant') {
$("#robo-image").attr("src", "images/avatar/D-Robo.png");
$(".user-description").prepend("<h3>Max</h3>");
} else if (convStyle == 'submissive') {
$("#robo-image").attr("src", "images/avatar/S-Robo.png");
$(".user-description").prepend("<h3>Linus</h3>");
}
}.robot-section {
overflow: hidden;
padding: 3rem 0 3rem 2rem;
/*padding: 3rem 0rem;*/
}
.robot-section {
overflow: hidden;
padding: 3rem 0 3rem 2rem;
/*padding: 3rem 0rem;*/
}
.robot-content-bottom {
overflow-x: hidden;
overflow-y: auto;
max-width: 100%;
/*position: absolute;*/
/*bottom: 5%;*/
}<div class="col-sm-6 col-md-4 col-lg-3 robot-section">
<div class="robot-content-top">
<div id="messageContainer"></div>
</div>
<div class="robot-content-bottom text-center">
<img id="robo-image" alt="avatar" class="avatar-img">
<div class="user-description">
<h4>Your personal financial advisor</h4>
</div>
<!--<div class="user-description">-->
<!--<!–<h3 style="margin-top: 30px;">Ethan</h3>–>-->
<!--<!–<h5>Your personal financial advisor</h5>–>-->
<!--</div>-->
</div>
</div>