CODEWITHSUNDEEP
htmlcssbackground-image
hbhb1401
hbhb1401

Reputation: 1

crop portrait image and resize to make a landscape cover css

I have an image like this image

Using HTML and CSS, how can I crop the middle part of the image and turn it into a landscape cover background like the picture below:

pic

The background should be 100% width and height about 400-500px at full screen and responsive. An addition of how to make the search box would be great. Thank you.

Upvotes: 0

Views: 1216

Answers (1)

devcrp
devcrp

Reputation: 1348

This CSS should do it:

.container {
  height: 100vh; 
  background-color: #e3e3e3;
  display: flex; 
  align-items: center;
}
.image {
  width: 100%; height: 200px; background-color: white;
  background: url(https://i.sstatic.net/l7pP3.jpg) center center;
  background-size: cover;
}

Here's a sample: https://jsfiddle.net/7ka9jbhg/3/

Upvotes: 1

Related Questions