Full width image with fixed height

Question

I m trying to create an image looking like the cover image here  using only css and html  I ve tried different things but nothing has worked so far   This is my html code    lt div id  container  gt       lt img id  image  src       gt   lt  div gt    What css code should I use

User · Answer

If you want to have same ratio you should create a container and hide a part of the image.

_x000D_

.container{_x000D_
  width:100%;_x000D_
  height:60px;_x000D_
  overflow:hidden;_x000D_
}_x000D_
.img {_x000D_
  width:100%;_x000D_
}

_x000D_

<div class="container">_x000D_
  <img src="http://placehold.it/100x100" class="img" alt="Our Location" /> _x000D_
</div>_x000D_
_x000D_

_x000D_

User · Answer

If you don t want to lose the ratio of your image  then don t bother with height 300px  and just use width 100     If the image is too large  then you will have to crop it using an image editor

User · Answer

image     width  100     height  100px    static   object-fit  cover

User · Answer

lt div id  container  gt       lt img style  width  100   height  40    id  image  src       gt   lt  div gt    I hope this will serve your purpose

User · Answer

Set the height of the parent element  and give that the width  Then use a background image with the rule  background-size  cover        parent          background-image  url    img team bgteam jpg          background-repeat  no-repeat         background-position  center center         -webkit-background-size  cover         background-size  cover

User · Answer

In order not to scratch the image you will need to use   max-height  200px  width  auto

User · Answer

you can use pixels or percent    lt div id  container  gt   lt img id  image  src       gt   lt  div gt    css   image   width 100   height

User · Answer

This can done several ways  I usually do it from my class   From class    image       width 100         and for this your html would be    lt img class  image  src  images image name  gt    or if you want to style it using inline styling then you would just have    lt img style  width 100   height 60px  id  image  src  images image name  gt    I however recommend doing it from your external style-sheet because as your project grows you will realize that the entire thing is easier managed with separate files for your html and your css

User · Answer

Set the image s width to 100   and the image s height will adjust itself    lt img style  width 100    id  image  src       gt    If you have a custom CSS  then   HTML    lt img id  image  src       gt   CSS     image       width  100       Also  you could do File - gt  View Source next time  or maybe Google

[html] Full width image with fixed height

Examples related to html

Examples related to css

Examples related to image

Examples related to width

Examples related to cover