How to give image height proportionally?

[newcoder1010]

Hello,

 

<div class="field field--name-field-image field--type-image field--label-hidden field--item">  <img src="/sites/default/files/2020-09/singe-house-5_0.png" width="1895" height="837" alt="uyg" typeof="foaf:Image" class="img-responsive">

</div>

HTML has the image url and the original dimension. I cant change that. 

I like the image to be 500px height and 100% width. However, when I give 500px height, it does not look good proportionally. Height:auto it changes height by itself but I need fixed 500px height. 

img {
    border: 0;
    width: 100%;
    float: left;
    height: 500px;

}

How can I give 500px height to the image so that it looks good proportionally?

When I set image as background, I use the below css and it works. I was thinking if I can apply similar css to image it would be very helpful. 

border-top: 5px solid #032d6a;
    background-attachment: fixed;
    background-color: rgba(255,255,255,0);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-image: url(kar-buy-houses.png);

Thanks!

[dsonesuk]

If you set fixed height, you have to use the opposite value as auto, to get proportionately correct image.

The background using cover will cause it to fill the whole area and clip any excess. So its not proportionately correct!

To get the image the same, you would have to use overflow-x:hidden; this will achieve the same clipping that backround-size: cover; gave.

[newcoder1010]

img{overflow-x: hidden;
    border: 0;
    width: 50%;
    float: left;
    height: 500px;}

It did not make any difference whether I keep overflow-x:hidden; or not. 

[dsonesuk]

Overflow on a outer container, with height 500px width: auto used on img element.

[newcoder1010]

https://drive.google.com/file/d/1KXOhEJYt8SJdX0VY4FrAdMc1_q4RTM5p/view?usp=sharing

 

<div class="field field--name-field-image1 field--type-image field--label-hidden field--item">  <img src="/sites/default/files/2020-09/house-5.png" width="1895" height="837" alt="test" typeof="foaf:Image" class="img-responsive">

</div>

.field.field--name-field-image1.field--type-image.field--label-hidden.field--item {
    height: 300px;
    overflow-x: hidden;
    background: red;
}
.portfolio img {
    border: 0;
    height: auto;
    /* width: 50%; */
    float: left;
    height: auto;
}

Image is not resizing to 300px. Please see the link. 

[newcoder1010]

I changed image height to 100%. It is bit better. If I keep over flow -x or not, it does not make difference. How can I make the image 300px height without stretching the image? Instead, I like to show part of the image by cropping top and bottom 10%. Perhaps something similar to background image position. 

[dsonesuk]

You don't have a portfolio class, so it wouldn't work.

https://www.w3schools.com/code/tryit.asp?filename=GJ9C01P6BR1H

Edited September 29, 2020 by dsonesuk

[newcoder1010]

.portfolio was the parent class of the the field. Now I changed it to the .field img and it worked. Below was helpful.

    object-fit: cover;

Thanks!