gpt4 book ai didi

css - 将 flex 元素内的图像拉伸(stretch)至全宽

转载 作者:太空宇宙 更新时间:2023-11-04 10:46:10 24 4
gpt4 key购买 nike

我在研究 CSS Flexbox 和媒体查询时偶然发现了这个问题。考虑到我的以下代码,尽管我将 div 元素宽度设置为 100%,但我无法将 flex 容器中最后一个 div 元素中的最后一张图像拉伸(stretch)到全宽。我怎样才能做到这一点?这是我的代码:

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Playing with CSS Flexbox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="layoutstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<nav>
<div class="logo">
</div>
<ul>
<li>
</li>
</ul>
</nav>
</header>
<main id="container">
<div class="featured">
</div>
<div class="flexbox col-1">
<img src=images/singapore-small.jpg alt=""
sizes="(min-width: 650px) 70vw, 100w"
srcset="images/singapore-x-small.jpg 400w,
images/singapore-small.jpg 600w,
images/singapore-medium.jpg 800w,
images/singapore-large.jpg 1000w,
images/singapore-x-large.jpg 1500w
"
/>
</div>
<div class="flexbox col-2">

<img src=images/skyscrapers-small.jpg alt=""
sizes="(min-width: 650px) 70vw, 100w"
srcset="images/skyscrapers-x-small.jpg 400w,
images/skyscrapers-small.jpg 600w,
images/skyscrapers-medium.jpg 800w,
images/skyscrapers-large.jpg 1000w,
images/skyscrapers-x-large.jpg 1500w
"
/>

</div>
<div class="flexbox col-3">

<img src=images/sunset-small.jpg alt=""
sizes="(min-width: 650px) 70vw, 100w"
srcset="images/sunset-x-small.jpg 400w,
images/sunset-small.jpg 600w,
images/sunset-medium.jpg 800w,
images/sunset-large.jpg 1000w,
images/sunset-x-large.jpg 1500w
"
/>

</div>
</main>
</body>
</html>

////////CSS//////

* {
box-sizing: border-box;
}

body,html {
width: 100%;
height: 100%;
}

body {
margin: 0;
}

li {
padding: 0;
list-style-type: none;
}

header {
display: flex;
}

main {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 100%;
}

@media all and (max-width: 650px) {

.flexbox {
width: 100%;
}

}

@media all and (min-width: 651px) {

.col-1, .col-2 {
width: 50%;
}

.col-3 {
width: 100%;
}
}

最佳答案

将此添加到您的 CSS 以最大化您的图像:

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

Demo at CodePen

关于css - 将 flex 元素内的图像拉伸(stretch)至全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35384232/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com