时间戳

首页 > 解决方案 > 如何在更改 Web 开发的屏幕尺寸时裁剪图像

javascript - 如何在更改 Web 开发的屏幕尺寸时裁剪图像

问题描述

我正在一个网站上工作，我正在尝试在我的页面上放置一些图像。我见过多个网站，其中图像随着页面大小的变化而被裁剪。这可以在此页面上看到：https ://www.cremedecornell.net （由于浏览器更改大小，前面的图像已移除外部）。我是编码新手，我正在尝试弄清楚如何做到这一点。上面有文字的大图像是我要在上面做的图像。谁能帮我解决这个问题？如果您需要更多信息，请告诉我。

// Navigation Bar Underline
$("a").click(function(){
    $("a.active-menu").removeClass("active-menu");
    $(this).addClass("active-menu");
 });
*{
    margin:0;
    padding:0;
    border:0;
}


.topnav {
    background-color: purple;
    overflow: hidden;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
  }

  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 3px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }

 .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }
.topnav a.active-menu:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom:3px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s; 
    }
  .leftimage{
    width:70%;
    position:absolute;left:0%;
  }
  .bio{
    background-color:blue;
    position:absolute;right:0%;
    text-align: center;
    width: 30%;
  }
  .rndface{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top:10%;
    margin-bottom:10%;
  }
.topname{
  padding-top:3%;
}
.school{
  padding-bottom:.4%;
  padding-top:5%;
}
.interests{
  padding-bottom:.4%;
}
.location{
  padding-bottom:.4%;
}
.fa {
  padding-left:2%;
  padding-right:2%;
  padding-top:4%;
  padding-bottom:3%;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
}
.fa:hover {
  opacity: 0.7;
}
.fa-instagram {
  color: white;
}
.fa-linkedin {
  color: white;
}
.section1{
  position: relative;
  text-align: center;
  color:white;
}
.HelloIm {
  position: absolute;
  top: 160px;
  left: 6%;
  font-size: 80px;
}
<!DOCTYPE html>
<html lang="en">
  <script src="jquery-3.5.1.min.js"></script>
  <script src='script.js'></script>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    Change
  </title>
</head>

<body>
  <header class="topnav" id="topnav">
    <a class="active-menu" href="index.html">Home</a>
    <a class="link" href="#news">DontUse</a>
    <a class="link" href="#contact">DontUse</a>
    <a class="link" href="about.html">About</a>
  </header>
  <div class='section1'>
    <img class= 'leftimage' src="https://www.topuniversities.com/sites/default/files/styles/lead_article_image/public/blogs/lead-images/engineering_imagery.jpg" alt="ADDALT">
    <div class='HelloIm'>Hello I'm</div>>
  </div>
  <div class='bio'>
      <img class = 'rndface' src="https://www.topuniversities.com/sites/default/files/styles/lead_article_image/public/blogs/lead-images/engineering_imagery.jpg" alt="ADDALT">
      <p class='topname'>
        <h1>Rn</h1>
        <br>
        <br>
      </p>
      <p class='school'>
        New Trier High School
      </p>
      <p class='interests'>
        Engineering & Computer Science
      </p>
      <p class='location'>
        Chicago, Illinois
      </p>
      <p>
        <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/rkin-a3a9541a5/" class="fa fa-linkedin"></a>
        <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/rn/" class="fa fa-instagram"></a>
      </p>
    </div>
</body>
</html>

标签： javascripthtmljquerycss

解决方案

我建议查看 css 属性object-fit。将其设置为 时cover，图像将按比例放大以填充其容器，必要时裁剪图像。

body,
html {
    margin: 0;
    padding: 0;
}

img {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
}
<img src="http://placekitten.com/2000/1000" />

推荐阅读