How do I resize the height of the image?

Question

I am trying to resize an image using "style="width: 100%; height: 50%". If I change the width, the image resizes. But if I change the height, the image does not resize.

So how do I change the height of the image?

Thank you.

<!doctype html>
<html>

<head>
</head>

<body>
  <div id="slideshow_wrap">
    <!-- slide show container -->
    <div class="slideshow-container">
      <div class="mySlides fade-slide">
        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:100%"> <!-- changing to height:50% does not affect -->
      </div>
    </div>
</body>

</html>

If the image already occupying the whole width of its parent container or 100% so upon changing the image height the image width will not react to any changes since the image already is fulfilling its width property value which is 100% — Alan M, Jan 16 '20 at 06:23

score 1 · Answer 1 · answered Jan 16 '20 at 06:12

changing to height:250px

<!doctype html>
<html>

<head>
</head>

<body>
  <div id="slideshow_wrap">
    <!-- slide show container -->
    <div class="slideshow-container">
      <div class="mySlides fade-slide">
        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:150px"> <!-- changing to height:250px does not affect -->
      </div>
    </div>
</body>

</html>

score 1 · Accepted Answer · answered Jan 16 '20 at 06:32

For the % to take effect you will need to add a fixed height to the parent

.parent {
  height: 300px;
  border: 1px solid red;
  margin-bottom: 50px;
}

.h-50 {
  height: 50%;
}

<div class="mySlides fade-slide parent">
  <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" class="h-50">
</div>

score 0 · Answer 3 · answered Jan 16 '20 at 06:17

you need to provide height in pixel. and also you need a put a class instead of inline css.

<!doctype html>
<html>

<head>
</head>

<body>
  <div id="slideshow_wrap">
    <!-- slide show container -->
    <div class="slideshow-container">
      <div class="mySlides fade-slide">
        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:100px"> <!-- changing to height:50% does not affect -->
      </div>
    </div>
</body>

</html>

and you should try to use calc() function for responsiveness issue.read here https://css-tricks.com/a-couple-of-use-cases-for-calc/

score 0 · Answer 4 · answered Jan 16 '20 at 06:22

The below code would work!! But you should always prefer keeping your css html and all javascript separately. Also instead of just px you can use em or rem . Read more about them here : https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

<!doctype html>
<html>

<head>
</head>

<body>
  <div id="slideshow_wrap">
    <!-- slide show container -->
    <div class="slideshow-container">
      <div class="mySlides fade-slide">
        <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:300px"> <!-- changing to height:50% does not affect -->
      </div>
    </div>
</body>

</html>

score 0 · Answer 5 · answered Jan 16 '20 at 06:23

0

You can try find more like why height percent doesn't work!! It here

CSS – why doesn’t percentage height work?

Percentage Height HTML 5/CSS

answered Jan 16 '20 at 06:23

SeeWICDo

3
3

score 0 · Answer 6 · answered Jan 16 '20 at 06:26

0

use object-fit: contain for your inline style img tag . like :

<img src='...' style='object-fit: contain'>

answered Jan 16 '20 at 06:26

Amin Karimi

73
1
9

score 0 · Answer 7 · answered Jan 16 '20 at 06:32

Now working <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:100%"> height change.

<!doctype html>
<html>
    <head>
        <style type="text/css">
            html, body, #slideshow_wrap, .slideshow-container, .mySlides{
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="slideshow_wrap">
            <!-- slide show container -->
            <div class="slideshow-container">
                <div class="mySlides fade-slide">
                    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%; height:100%"> <!-- changing to height:50% does not affect -->
                </div>
            </div>
        </div>
    </body>
</html>

score 0 · Answer 8 · answered Jan 16 '20 at 06:34

If you want to edit the image height with by percentage, you can try to display the image as a background.

In this example, the container height is 200px, and the size of the image is displaying with: width: 100% (100% of 200px) - height: 50% (50% of 200px).

.slideshow-container {
  display: table;
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
}

.slideshow-container .mySlides {
  display: table-cell;
  background-image: url("https://www.w3schools.com/howto/img_nature_wide.jpg");
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-position: center; /* this property is an optional*/
}

<div id="slideshow_wrap">
  <!-- slide show container -->
  <div class="slideshow-container">
    <div class="mySlides fade-slide">
  </div>
</div>

How do I resize the height of the image?

8 Answers8