文本图像响应
Text-image responsivenes
我大约 2 周前开始学习 HTML/css 并且（除其他外）这是我想到的页面之一，但是当我缩小 window。到目前为止，大部分课程都是关于 HTML 和 CSS，以及如何使文档易于屏幕阅读器阅读，我想利用我所掌握的知识进行一些练习。知道为什么图像没有随着文本一起缩小吗？为什么？
非常感谢！
HTML:
@import url('https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap');
body {
margin: 0;
padding: 0;
background-color: #d89cf6;
}
.top {
position: relative;
padding: 1em 2em 1em 2em;
height: 3em;
background-color: #3e206d;
margin: auto;
overflow: hidden;
border-top: solid 6px;
border-bottom: solid 1px;
}
.top h1 {
position: absolute;
display: flex;
float: left;
margin: 0;
padding: 0;
margin-top: .3em;
font-family: 'Kelly Slab', cursive;
font-size: 2.4em;
color: #f0e3ff;
}
.top ul {
list-style-type: none;
display: flex;
float: right;
margin: 0;
padding: 0;
margin-top: 1.43em;
}
.top li {
padding: 0 0.3em;
margin: auto;
margin-top: .5em;
position: relative;
}
.top a {
text-decoration: none;
color: #f0e3ff;
font-family: 'Kelly Slab', cursive;
font-size: 1.2em;
}
.main {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
.main h2 {
font-size: 1.8rem;
}
.main p {
font-size: 1.3rem;
}
.main img {
min-width: auto;
width: auto;
max-height: 29em;
min-height: 25%;
}
.text_picture {
float:right;
width: auto;
margin: auto;
}
.thank_you {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
footer {
font-size: 1.2rem;
margin: auto;
text-align: center;
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
<!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>Skeleton</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
</head>
<body>
<header>
<div class="top">
<h1>Arghhhh</h1>
<nav class="internal_nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="main">
<article>
<h2>Lorem, ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolore vero natus libero labore! Voluptas, culpa cum animi, explicabo laudantium fuga rem hic fugiat deleniti eveniet ad dignissimos minus! Nisi cumque dolore illo corrupti quo recusandae possimus aliquam officiis blanditiis, inventore veritatis. Cum itaque molestiae iusto dolorem esse illo saepe ipsam dolor cupiditate neque velit, dolore error earum eveniet tempora!
</p>
<div id="text_picture_container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ab magni officiis eos rem in aperiam tenetur quidem maiores, tempore enim, id sapiente velit pariatur ducimus. Velit vero consequuntur possimus quam culpa voluptatum officia est voluptate eum, labore facilis assumenda rerum harum ipsam facere quas cupiditate. Itaque facilis voluptas cupiditate eos? Commodi odit tempore nihil blanditiis, excepturi quidem vero. Nam nesciunt corporis minima alias aperiam voluptate neque quidem consequatur ab sed, mollitia nulla labore expedita? Laboriosam atque error, similique temporibus eius, sunt quaerat nobis vero maxime corrupti quis ipsam. Aliquam rem id harum culpa nesciunt facere sit atque provident neque!
</p>
<div class="text_picture">
<figure>
<img src="images/wallpaper-364615676716148alamn2ffq.jpg" alt="lone tree in a field with a orange/magenta sunset in the background">
<br>
<figcaption>A lonely tree in the middle of a field, with a really colorful sunset background.
</figcaption>
</figure>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt earum assumenda praesentium dolor et veritatis libero. Eveniet quasi fugiat, consectetur error possimus natus? Quasi explicabo deserunt quisquam necessitatibus hic aspernatur totam tenetur eveniet accusamus! Voluptate reprehenderit sunt repellat aut adipisci temporibus provident vitae amet cum doloribus dolorum tempora, perferendis voluptas aperiam libero similique distinctio quam corrupti consequatur vero magnam commodi. Enim, consequuntur. Quod maiores laudantium nesciunt doloremque, voluptatem dolorum amet. Tempore, vel dignissimos, veniam magni recusandae saepe ab labore itaque eum officiis, quaerat quae eveniet? Placeat nemo aperiam similique earum, tempore dicta totam atque. Perspiciatis, aut. Ea distinctio iure minima, id doloremque quisquam quidem expedita nemo. Facere dignissimos, architecto similique repellendus aliquid dicta deserunt et esse voluptate nulla ipsum quod earum voluptas nobis consectetur expedita quas, non itaque. Optio incidunt dolor distinctio, ducimus beatae doloribus magni ut aliquam a facere laborum ipsam ratione voluptatem. Dolore modi error nemo impedit recusandae?
</p>
<div class="first_survey">
<form class="survey">
<fieldset>
<legend>Chose what impressed you the most:</legend>
<label for="style">The styling</label>
<input type="checkbox" id="style" name="survey_choice" value="style">
<label for="writing">The writing</label>
<input type="checkbox" id="writing" name="survey_choice" value="writing">
<label for="pictures">The pictures</label>
<input type="checkbox" id="writing" name="survey_choice" value="pictures">
<div class="button">
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
</section>
<div href="#" class="thank_you">
<h2>Thank you for taking your time to browse my webpage!
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quisquam commodi sapiente quos ut unde consectetur alias culpa veniam, quasi perspiciatis expedita esse accusantium quas enim quam soluta, quibusdam sit? Quisquam placeat, iure possimus cupiditate libero non esse quasi facere deserunt debitis delectus reiciendis aliquid magnam a blanditiis, eaque officia.
<p>
</div>
</article>
</body>
<footer>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, dolore?</h6>
</footer>
</html>
您始终可以使用 VH 表示视口宽度的单位。
不过，我建议使用REM和EM单位来代替，当然，这取决于你的需要。
欢迎阅读这篇深入解释该主题的文章。
CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units
现在，关于响应式图像大小调整，您只需添加具有这些属性的 class 并将其设置为您想要的图像。
.responsive {
width: 100%;
height: auto;
}
正如我之前所说，阅读 Medium 文章，您也可以在图像上使用 REM、EM、PX、% 单位。
我大约 2 周前开始学习 HTML/css 并且（除其他外）这是我想到的页面之一，但是当我缩小 window。到目前为止，大部分课程都是关于 HTML 和 CSS，以及如何使文档易于屏幕阅读器阅读，我想利用我所掌握的知识进行一些练习。知道为什么图像没有随着文本一起缩小吗？为什么？
非常感谢！
HTML:
@import url('https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap');
body {
margin: 0;
padding: 0;
background-color: #d89cf6;
}
.top {
position: relative;
padding: 1em 2em 1em 2em;
height: 3em;
background-color: #3e206d;
margin: auto;
overflow: hidden;
border-top: solid 6px;
border-bottom: solid 1px;
}
.top h1 {
position: absolute;
display: flex;
float: left;
margin: 0;
padding: 0;
margin-top: .3em;
font-family: 'Kelly Slab', cursive;
font-size: 2.4em;
color: #f0e3ff;
}
.top ul {
list-style-type: none;
display: flex;
float: right;
margin: 0;
padding: 0;
margin-top: 1.43em;
}
.top li {
padding: 0 0.3em;
margin: auto;
margin-top: .5em;
position: relative;
}
.top a {
text-decoration: none;
color: #f0e3ff;
font-family: 'Kelly Slab', cursive;
font-size: 1.2em;
}
.main {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
.main h2 {
font-size: 1.8rem;
}
.main p {
font-size: 1.3rem;
}
.main img {
min-width: auto;
width: auto;
max-height: 29em;
min-height: 25%;
}
.text_picture {
float:right;
width: auto;
margin: auto;
}
.thank_you {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
footer {
font-size: 1.2rem;
margin: auto;
text-align: center;
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
<!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>Skeleton</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
</head>
<body>
<header>
<div class="top">
<h1>Arghhhh</h1>
<nav class="internal_nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="main">
<article>
<h2>Lorem, ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolore vero natus libero labore! Voluptas, culpa cum animi, explicabo laudantium fuga rem hic fugiat deleniti eveniet ad dignissimos minus! Nisi cumque dolore illo corrupti quo recusandae possimus aliquam officiis blanditiis, inventore veritatis. Cum itaque molestiae iusto dolorem esse illo saepe ipsam dolor cupiditate neque velit, dolore error earum eveniet tempora!
</p>
<div id="text_picture_container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ab magni officiis eos rem in aperiam tenetur quidem maiores, tempore enim, id sapiente velit pariatur ducimus. Velit vero consequuntur possimus quam culpa voluptatum officia est voluptate eum, labore facilis assumenda rerum harum ipsam facere quas cupiditate. Itaque facilis voluptas cupiditate eos? Commodi odit tempore nihil blanditiis, excepturi quidem vero. Nam nesciunt corporis minima alias aperiam voluptate neque quidem consequatur ab sed, mollitia nulla labore expedita? Laboriosam atque error, similique temporibus eius, sunt quaerat nobis vero maxime corrupti quis ipsam. Aliquam rem id harum culpa nesciunt facere sit atque provident neque!
</p>
<div class="text_picture">
<figure>
<img src="images/wallpaper-364615676716148alamn2ffq.jpg" alt="lone tree in a field with a orange/magenta sunset in the background">
<br>
<figcaption>A lonely tree in the middle of a field, with a really colorful sunset background.
</figcaption>
</figure>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt earum assumenda praesentium dolor et veritatis libero. Eveniet quasi fugiat, consectetur error possimus natus? Quasi explicabo deserunt quisquam necessitatibus hic aspernatur totam tenetur eveniet accusamus! Voluptate reprehenderit sunt repellat aut adipisci temporibus provident vitae amet cum doloribus dolorum tempora, perferendis voluptas aperiam libero similique distinctio quam corrupti consequatur vero magnam commodi. Enim, consequuntur. Quod maiores laudantium nesciunt doloremque, voluptatem dolorum amet. Tempore, vel dignissimos, veniam magni recusandae saepe ab labore itaque eum officiis, quaerat quae eveniet? Placeat nemo aperiam similique earum, tempore dicta totam atque. Perspiciatis, aut. Ea distinctio iure minima, id doloremque quisquam quidem expedita nemo. Facere dignissimos, architecto similique repellendus aliquid dicta deserunt et esse voluptate nulla ipsum quod earum voluptas nobis consectetur expedita quas, non itaque. Optio incidunt dolor distinctio, ducimus beatae doloribus magni ut aliquam a facere laborum ipsam ratione voluptatem. Dolore modi error nemo impedit recusandae?
</p>
<div class="first_survey">
<form class="survey">
<fieldset>
<legend>Chose what impressed you the most:</legend>
<label for="style">The styling</label>
<input type="checkbox" id="style" name="survey_choice" value="style">
<label for="writing">The writing</label>
<input type="checkbox" id="writing" name="survey_choice" value="writing">
<label for="pictures">The pictures</label>
<input type="checkbox" id="writing" name="survey_choice" value="pictures">
<div class="button">
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
</section>
<div href="#" class="thank_you">
<h2>Thank you for taking your time to browse my webpage!
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quisquam commodi sapiente quos ut unde consectetur alias culpa veniam, quasi perspiciatis expedita esse accusantium quas enim quam soluta, quibusdam sit? Quisquam placeat, iure possimus cupiditate libero non esse quasi facere deserunt debitis delectus reiciendis aliquid magnam a blanditiis, eaque officia.
<p>
</div>
</article>
</body>
<footer>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, dolore?</h6>
</footer>
</html>
您始终可以使用 VH 表示视口宽度的单位。
不过，我建议使用REM和EM单位来代替，当然，这取决于你的需要。
欢迎阅读这篇深入解释该主题的文章。
CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units
现在，关于响应式图像大小调整，您只需添加具有这些属性的 class 并将其设置为您想要的图像。
.responsive {
width: 100%;
height: auto;
}
正如我之前所说，阅读 Medium 文章，您也可以在图像上使用 REM、EM、PX、% 单位。