Jump to content

How to give image height proportionally?


newcoder1010
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...