CODEWITHSUNDEEP
javascripthtmlcssimage
Paul Davis
Paul Davis

Reputation: 525

HTML, CSS and Js for limiting img size to a box, cutting off anything outside

I am new to code, so be gentle :slight_smile:

If I have a navigation bar at the top of a webpage and then directly under that I want a background picture (for this experiment I will just choose a randomly sized photograph from my own collection). I’ll use that picture somewhat similar to how Facebook have their cover photo. But I have a very specific size limit and I also want that to change with device size.

     #container {
  width: 90%;
  margin: auto;
}

@media screen and (max-width: 768px){
#container {
  width: 90%;
}

That’s as far as I have got.

How do I make an image cut off its top or sides if it goes past a certain width or height but also do not stretch the image (the image needs to maintain its x,y sizes so it does not distort)?

I am only using HTML, CSS and JS at the moment.

Thanks in advance. Looking forward for the learning.

Upvotes: 0

Views: 59

Answers (2)

Kumar Gaurav
Kumar Gaurav

Reputation: 738

This will help you to understand, how object-fit will work?

#main {
  width:100%;
  height:100px;
  overflow: hidden;
}
#main img {
  width:100%;
  height:100%;
  object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="main">
    <img src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg" alt="alttext">
  </div>
</body>
</html>

Upvotes: 0

Wax
Wax

Reputation: 625

You can use the CSS property object-fit with the "cover" value.

Upvotes: 1

Related Questions