如何拉伸图像响应以填充整个屏幕

发布于 2025-02-14 01:19:16 字数 855 浏览 3 评论 0原文

我想知道如何将图像扩展到标记为黑色的部分（[）。这是我的代码（我正在尝试使其响应迅速）：

body {
  background: #aeddd5;
}

.main {
  max-width: 900px;
  margin: auto;
}

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

<body>

  <div class="main">
    <img src="./img/cf60903b8674148b9ab6ba194833fd2f_page-0001.jpg">
  </div>

</body>

我拥有的

我想拥有这样的东西：

原文

I want to know how can I extend the image to the part ([) marked in black. This is my code (I'm trying to make it responsive):

body {
  background: #aeddd5;
}

.main {
  max-width: 900px;
  margin: auto;
}

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

<body>

  <div class="main">
    <img src="./img/cf60903b8674148b9ab6ba194833fd2f_page-0001.jpg">
  </div>

</body>

What I have

I want to have something like this:

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

祁梦 2025-02-21 01:19:16

您可以使用 object> object-fit < /code>属性，添加display：block到图像中，以消除图像留下的多余空间，用于内联元素并声明大小用 VH和vw

body {
  margin: 0;
}

img {
  display: block;
  object-fit: cover;
  height: 100vh;
  width: 100vw;
}

<div class="main">
  <!-- Example image -->
  <img src="https://pbs.twimg.com/media/EzueaqPVgAEIPgd?format=jpg&name=large">
</div>

You can stretch the image with the object-fit property, add display: block to the image for eliminate the excess space left by the images for being inline elements and declared a size coverting all the page with the relative length units vh and vw

body {
  margin: 0;
}

img {
  display: block;
  object-fit: cover;
  height: 100vh;
  width: 100vw;
}

<div class="main">
  <!-- Example image -->
  <img src="https://pbs.twimg.com/media/EzueaqPVgAEIPgd?format=jpg&name=large">
</div>

回复收藏 0 原文

夏见 2025-02-21 01:19:16

似乎您想为所有屏幕视图拉伸图像。

body {
  background: #aeddd5;
}

.main {
  max-width: 900px;
  margin: auto;
}

img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media only screen and (max-width: 600px) {
  img[data-width="1024"] {
    height: 100vh;
  }
  img[data-width="1440"] {
    height: 100vh;
  }
}

<div class="main">
  <img src="https://th.bing.com/th/id/OIP._HNl_Hk5V4UVNVikQTEvaQHaKb?pid=ImgDet&w=169&h=237&c=7" data-width="1024" data-height="768" />
</div>

Seems like you want to stretch the image for all screen views.

body {
  background: #aeddd5;
}

.main {
  max-width: 900px;
  margin: auto;
}

img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media only screen and (max-width: 600px) {
  img[data-width="1024"] {
    height: 100vh;
  }
  img[data-width="1440"] {
    height: 100vh;
  }
}

<div class="main">
  <img src="https://th.bing.com/th/id/OIP._HNl_Hk5V4UVNVikQTEvaQHaKb?pid=ImgDet&w=169&h=237&c=7" data-width="1024" data-height="768" />
</div>

回复收藏 0 原文

偷得浮生 2025-02-21 01:19:16

更改高度：100％ <代码>高度：100VH 并添加object-fit：cover

body {
  background: #aeddd5;
  margin: 0;
}

.main {
  max-width: 900px;
  margin: auto;
}

img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
}

<div class="main">
  <img src="https://picsum.photos/400/1200">
</div>

Change height:100% to height:100vh and add object-fit:cover

body {
  background: #aeddd5;
  margin: 0;
}

.main {
  max-width: 900px;
  margin: auto;
}

img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
}

<div class="main">
  <img src="https://picsum.photos/400/1200">
</div>

回复收藏 0 原文

迷乱花海 2025-02-21 01:19:16

html： -

<html>
<head>
<title>Your Title</title>
<style>
body{
    background: #000000;
}
.main{
  max-width:900px;
  margin: auto;
}
img{
  width:100%;
  height:100%;
  padding: 2%;
  background-color: #ffffff;
}
.outborder{
    background: #aeddd5;
    padding: 1%;
}
</style>
</head>
<body>
  <div class="outborder">
    <div class="main">
      <img src="./img/cf60903b8674148b9ab6ba194833fd2f_page-0001.jpg">   
     </div>
  </div>
</body>
</html>

我想这应该为您解决。我只是为水上颜色做了另一个划分，然后将身体颜色更改为黑色。添加了一些填充＆amp;颜色到图像背景。

HTML:-

<html>
<head>
<title>Your Title</title>
<style>
body{
    background: #000000;
}
.main{
  max-width:900px;
  margin: auto;
}
img{
  width:100%;
  height:100%;
  padding: 2%;
  background-color: #ffffff;
}
.outborder{
    background: #aeddd5;
    padding: 1%;
}
</style>
</head>
<body>
  <div class="outborder">
    <div class="main">
      <img src="./img/cf60903b8674148b9ab6ba194833fd2f_page-0001.jpg">   
     </div>
  </div>
</body>
</html>

I guess this should work out for you. I just made another division for the aqua color and changed the body color to black. Added some padding & color to image background.

回复收藏 0 原文

~没有更多了~