how to get image to resize instead of being cropped

user_18870281 0
Viewed 52

anytime I try to change the min-height or get rid of it all together and add max-height it deletes the image all together. I'd like to resize the image based on the screen but instead it's cropping the image, which I don't want.

.container {
  position: relative;
  text-align: center;
  color: white;
  min-height: 600px;
  max-height: 1220px;
  background-image: url("https://www.culturedkam.com/wp-content/uploads/2022/04/20210924_183939-scaled.jpg");
  background-position: center;
  background-attachment: local;
}


/* Centered text */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8vw;
  font-family: bn;
}

@media only screen and (max-width: 800px) {
  .centered {
    top: 45%;
    font-size: 12vw;
  }
}


/* Centered text */

.lower-centered {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: smf;
  font-size: 8vw;
  line-height: normal;
}

@media only screen and (max-width: 600px) {
  .lower-centered {
    top: 60%;
    font-size: 12vw;
  }
}

.img {
  size: cover;
}
<div class="container"><span role="img" aria-label="bridge"></span>
  <div class="centered">Connecting</div>
  <div class="lower-centered">Travel and Wellness</div>
</div>

css html
4 Answers

This portion of code might help you resize the displayed imaged correctly.

<!DOCTYPE html>
<html lang="en">
  <!-- FIRST SOLUTION -->
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
  <img src="#" alt="">
  <!-- SECOND SOLUTION -->
    <style rel="stylesheet">
      *{
        margin:0;
        padding:0;
      } 
      img {
        background-size: contain; /* scales the image */
        background-position: center; /* centers the image */
      }
    </style>
  </body>
</html>
user_164353840

If you are okay with image stretch you can use

background-size:100% 100%;

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}


img{
  max-width: 100%;
  display: block;
}

body{
  min-height: 100vh;
  /* display: grid;
  place-content: center; */
  font-family: Arial, Helvetica, sans-serif;
  background-color: bisque;
}

.container {
  position: relative;
  text-align: center;
  color: white;
  min-height: 600px;
  max-height: 1220px;
  max-height: 100vh;
  background-image: url("https://www.culturedkam.com/wp-content/uploads/2022/04/20210924_183939-scaled.jpg");
  background-size:100% 100%;
}


/* Centered text */

.centered {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8vw;
  font-family: bn;
}

@media only screen and (max-width: 800px) {
  .centered {
    top: 45%;
    font-size: 12vw;
  }
}


/* Centered text */

.lower-centered {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: smf;
  font-size: 8vw;
  line-height: normal;
}

@media only screen and (max-width: 600px) {
  .lower-centered {
    top: 60%;
    font-size: 12vw;
  }
}

.img {
  size: cover;
}
<div class="container">
        <span role="img" aria-label="bridge"></span>
        <div class="centered">Connecting</div>
        <div class="lower-centered">Travel and Wellness</div>
</div>

user_177557770

How about using an img-element instead of a background-image? That way the img-element can just style to the width of the container, but the container will get its height from the img-element so there is no need to set a minimum height (because an img-element can easily keep it's aspect-ratio.)

.container {
  position: relative;
}

img{
  width: 100%;
  height: auto;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.headings{
  color: white;
  font-size: 4vw;
  font-family: sans-serif;    
  text-align: center;
  text-shadow: 2px 2px 5px black;

}
<div class="container">
  <img src="https://www.culturedkam.com/wp-content/uploads/2022/04/20210924_183939-scaled.jpg" alt="bridge">
  <div class="centered headings">
    <h1>Connecting</h1>
    <h2>Travel and Wellness</h2>
  </div>
</div>

user_179070840

You should delete min-height and set height: 100vh and background-size: 100% 100%:

.container {
  position: relative;
  text-align: center;
  color: white;
  height: 100vh;
  background-image: url("https://www.culturedkam.com/wp-content/uploads/2022/04/20210924_183939-scaled.jpg");
  background-size: 100% 100%;
  background-position: center;
  background-attachment: local;
}


/* Centered text */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8vw;
  font-family: bn;
}

@media only screen and (max-width: 800px) {
  .centered {
    top: 45%;
    font-size: 12vw;
  }
}


/* Centered text */

.lower-centered {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: smf;
  font-size: 8vw;
  line-height: normal;
}

@media only screen and (max-width: 600px) {
  .lower-centered {
    top: 60%;
    font-size: 12vw;
  }
}

.img {
  size: cover;
}
<div class="container"><span role="img" aria-label="bridge"></span>
  <div class="centered">Connecting</div>
  <div class="lower-centered">Travel and Wellness</div>
</div>

user_170071840
Related