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

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 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

If you want to have same ratio you should create a container and hide a part of the image    x000D   x000D   container  x000D    width 100   x000D    height 60px  x000D    overflow hidden  x000D    x000D   img   x000D    width 100   x000D    x000D   lt div class  container  gt  x000D     lt img src  http   placehold it 100x100  class  img  alt  Our Location    gt   x000D   lt  div gt  x000D   x000D      x000D   x000D   x000D

User · Answer

image     width  100     height  100px    static   object-fit  cover

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

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

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

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

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

[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