如何使文本和图像具有响应性？
[英]How do I make text and images responsive?
问题描述
这是我第一次尝试构建网页。
我试图使我的文本与图像一起响应，以防止它们不恰当地重叠和/或使文本在某些图像上保持原位。
我首先将相对位置应用于容器并将绝对位置应用于各个子项。
我在 calc() 中使用过 px、em、vh/vw、%，并在我的 css 中尝试了一点弹性。
虽然我有一些运气，但我觉得我错过了一些东西——因为当我放大 10-20 像素的宽度时，事情变得非常混乱。
现在，我知道我可以使用很多媒体查询。 但是，每 5px 放置一个媒体查询似乎不仅不优雅……而且完全错误。
下面包括一些图像：
https://ibb.co/DYvJq3L
https://ibb.co/GJ3Rz1j
https://ibb.co/mtd66XF
https://ibb.co/kXDkb6f
https://ibb.co/nr41vDk
感谢您的任何帮助，对不起，我罗嗦了！
祝一切顺利，马利克
编辑：
<header>
<div class="container">
<h1 id="title">Frank Lloyd Wright</h1>
<p class="sub-title">american organic architect</p>
<div class="intro-block">
<img src="images/flw-fallingwater-exterior-blkovr-90-700-459.png" alt="fallingwater house" class="mobile-falling-water">
<img src="images/flw-fallingwater-exterior-blkovr-90-450-295.png" alt="fallingwater house" class="tablet-falling-water">
<img src="images/flw-fallingwater-exterior-blkovr-90-700-459.png" alt="fallingwater house" class="desktop-falling-water">
</div>
<div class="quote">
<div>
<p class="quote-art-craft">“As we work along our various ways, there takes shape within us, in some sort, an ideal — something we are to become — some work to be done. This, I think, is denied to very few, and we begin really to live only when the thrill of this ideality moves us in what we will to accomplish.”</p>
</div>
<div>
<p class="credit-art-craft">The Art and Craft of the Machine<br>by Frank Lloyd Wright</p>
</div>
<div>
<p class="rights-art-craft">Copyright 1901 | Chicago Architectural Club</p>
</div>
<div>
<cite class="cite-art-craft">https://www.jstor.org/stable/pdf/25505640.pdf</cite>
</div>
</div>
</div>
</header>
<main>
<figure id="img-div">
<img src="images/flw-black-and-white-1200-1521.png" alt="frank lloyd wright" id="image">
<figcaption id="img-caption">
Birth:<br>
June 8, 1867 in Richland Center,<br>
Wisconsin, U.S.<br><br>
Death:<br>
April 9, 1959 in Phoenix,<br>
Arizona, U.S.
</figcaption>
</figure>
<div id="tribute-info">
<div class="tribute-img">
<div class="mobile-tribute-img">
<img src="images/flw-taliesin-interior-blkovr-90-375-563-hf1.png" alt="taliesin interior first half" class="taliesin-first-half">
<img src="images/flw-taliesin-interior-blkovr-90-375-563-hf2.png" alt="taliesin interior second half" class="taliesin-second-half">
</div>
<img src="images/flw-taliesin-interior-blkovr-90-728-546.png" alt="taliesin interior" class="tablet-taliesin-interior">
<img src="images/flw-taliesin-interior-blkovr-90-2242-1682.png" alt="taliesin interior" class="desktop-taliesin-interior">
</div>
<section class="section-info">
<ul class="info-one">
<li>1885 to 1886 - Attended the University of Wisconsin at Madison and took engineering courses, as there was no architectural instruction available.</li>
<li>1887 - Moved to Chicago and began architectural detailing with J.L. Silsbee. Later, he worked in Dankmar Adler and Louis Sullivan, an important architectural firm; and in a short time, became chief assistant to Sullivan.</li>
<li>1889 - In June, Catherine Tobin and he were married.</li>
<li>1893 - Left Sullivan to open his own architectural practice. He would then have six children and his firm would grow by 10 assistants.</li>
<li>1900 - Wright was the chief practitioner of the now mature Prairie architectural style. He was 33 years old and mostly self-taught. He alone built around 50 Prairie houses from 1900 to 1910.</li>
<li>1901 - The Art and Craft of the Machine was first printed. As Wright continuously lectured, he would produce this — his most famous speech.</li>
<li>1894 to 1902 - During these years, his works would be featured in local exhibitions. His most impactful works were for business and church.</li>
<li>1902 - Wright produced the first masterwork of the Prairie school — the W.W. Willitses House in Highland Park, Illinois, U.S.</li>
<li>1904 - The Larkin Company’s administrative block was erected. It was then demolished in 1950.</li>
<li>1905 - He traveled to Japan.</li>
</ul>
<ul class="info-two">
<li>1908 - The Unitarian Church of Oak Park, Illinois was finished. It was dedicated on September 26, 1909. In 1971, it was registered as a national historic landmark.</li>
<li>1909 - Wright began work on Taliesin (Welsh for ’Shining Brow’) — his own house and studio near Spring Green, Wisconsin, U.S.</li>
<li>1912 - He designed his first skyscraper. It was a slender concrete slab. While prophetic it was ultimately unbuilt.</li>
<li>1915 to 1922 - One of Wright’s most significant works — The Imperial Hotel — boasted unprecedented construction, lavish comforts and remarkable spaces. It was dismantled in 1967.</li>
<li>1922 - Catherine and Wright divorced.</li>
<li>1928 - Wright married Olgivanna Hinzenberg. Also around this time, the Taliesin was seized by the bank.</li>
<li>1929 - The stock market crash halted all activity in architecture. Wright spent these years lecturing at Chicago, New York City and Princeton, New Jersey.</li>
<li>1935 to 1937 - Fallingwater was designed and completed. Built near Mill Run, Pennsylvania, it is possibly Wright’s most admired work.</li>
<li>1956 to 1959 - The Guggenheim was built to house a permanent collection of abstract art.</li>
<li>1960 to 1962 - After Wright’s death, the Marin County Civic Center would rise under the watch of his protégé — Aaron Green.</li>
</ul>
</section>
</div>
</main>
<div class="link-div">
<a href="https://franklloydwright.org" target="_blank" id="tribute-link">Learn More</a>
</div>
<div class="supporting-text">
<p class="work-info">
Wright designed near 800 buildings.<br>
380 were actually built.<br>
A number of them still stand today.</p>
<p class="img-info">
Images: Top | Fallingwater House (Exterior),<br>
Right | Frank Lloyd Wright, Bottom | Taliesin House (Interior)<br>
</p>
<div class="credits">
<p class="info-cite-kaufmann">Info: Edgar Kaufmann/Encyclopaedia Brittanica/Contributors</p>
<cite class="cite-kaufman">(https://www.britannica.com/biography/Frank-Lloyd-Wright)</cite>
<p class="info-cite-flw-foundation">& Frank Lloyd Wright Foundation</p>
<cite class="cite-flworg">(https://franklloydwright.org)</cite>
</div>
</div>
</body>
</html>```
body {
position: relative;
margin: 0;
}
p, li, cite, figcaption {
font-family: 'Spectral';
}
li {
margin-bottom: 1em;
}
header {
position: relative;
}
.container {
position: relative;
margin-bottom: 50px;
}
.intro-block {
position: relative;
top: 0vw;
z-index: -1;
}
.mobile-falling-water {
position: relative;
top: 0vh;
max-width: 100%;
width: 100%;
height: auto;
z-index: 5;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 5vw;
font-weight: 700;
color: #fff;
position: absolute;
top: 0vh;
left: 6.8vw;
z-index: 1;
}
.sub-title {
font-family: 'Montserrat', sans-serif;
font-size: 3vw;
font-weight: 100;
font-style: italic;
color: #fff;
position: absolute;
top: 4vh;
left: 6.8vw;
z-index: 1;
}
.quote {
color: #fff;
position: absolute;
top: 14vh;
left: 6.8vw;
right: 6.8vw;
display: flex;
flex-direction: column;
z-index: 1;
}
.quote-art-craft {
font-size: calc(1.3vh + 1vmin);
line-height: 2.3vh;
font-weight: lighter;
margin-bottom: .5vh;
}
.credit-art-craft {
font-size: 2.5vw;
line-height: 1.7vh;
font-weight: lighter;
margin: .5vh auto .5vh;
}
.rights-art-craft {
font-size: 2.5vw;
line-height: 1.7vh;
font-weight: lighter;
margin: .5vh auto -.5vh;
}
.cite-art-craft {
font-size: 2.5vw;
line-height: 1.7vh;
font-weight: lighter;
margin: -.5vh auto .5vh;
}
#img-div {
position: relative;
margin-left: 0;
margin-right: 0;
}
#image {
position: absolute;
max-width: 100%;
height: auto;
}
#img-caption {
text-align: center;
line-height: 1.3;
font-size: 2.5vh;
position: absolute;
top: 75.5vh;
margin: 1em 4em 1.75em 4.5em;
}
.tribute-info {
position: relative;
}
.taliesin-first-half {
position: absolute;
top: 154vh;
max-width: 100%;
max-height: auto;
}
.taliesin-second-half {
position: absolute;
top: 239.3vh;
max-width: 100%;
max-height: auto;
}
.info-one {
color: #fff;
line-height: 1.3;
font-size: .7em;
position: absolute;
top: 152.5vh;
width: 75vw;
height: auto;
margin: 3em 1em 3em auto;
overflow: hidden;
}
.info-two {
color: #fff;
line-height: 1.3;
font-size: .7em;
position: absolute;
top: 240vh;
width: 75vw;
height: auto;
margin: 3em 1em 3em auto;
overflow: hidden;
}
#tribute-link {
background-color: #BF2B4D;
color: #fff;
text-decoration: none;
text-align: center;
font-family: 'Montserrat';
font-size: 1.1em;
border-radius: 10px;
display: block;
width: calc(100% - 65vw);
position: absolute;
top: 340vh;
padding: .5em;
margin-left: 7em;
margin-right: 7em;
}
.supporting-text {
background-color: #242424;
color: #fff;
text-align: center;
font-size: .6em;
position: absolute;
top: 2290px;
max-width: 100%;
min-width: 375px;
height: auto;
}
1 个解决方案
解决方案1
0 2020-10-18 21:15:12
移除：css中不必要的定位，让元素正常流动。
添加：背景属性，使列表与下层图像适当匹配。
<section id="tribute-info">
<ul class="info-one">
<li>1885 to 1886 - Attended the University of Wisconsin at Madison and took engineering courses, as there was no architectural instruction available.</li>
<li>1887 - Moved to Chicago and began architectural detailing with J.L. Silsbee. Later, he worked in Dankmar Adler and Louis Sullivan, an important architectural firm; and in a short time, became chief assistant to Sullivan.</li>
<li>1889 - In June, Catherine Tobin and he were married.</li>
<li>1893 - Left Sullivan to open his own architectural practice. He would then have six children and his firm would grow by 10 assistants.</li>
<li>1900 - Wright was the chief practitioner of the now mature Prairie architectural style. He was 33 years old and mostly self-taught. He alone built around 50 Prairie houses from 1900 to 1910.</li>
<li>1901 - The Art and Craft of the Machine was first printed. As Wright continuously lectured, he would produce this — his most famous speech.</li>
<li>1894 to 1902 - During these years, his works would be featured in local exhibitions. His most impactful works were for business and church.</li>
<li>1902 - Wright produced the first masterwork of the Prairie school — the W.W. Willitses House in Highland Park, Illinois, U.S.</li>
<li>1904 - The Larkin Company’s administrative block was erected. It was then demolished in 1950.</li>
<li>1905 - He traveled to Japan.</li>
</ul>
<ul class="info-two">
<li>1908 - The Unitarian Church of Oak Park, Illinois was finished. It was dedicated on September 26, 1909. In 1971, it was registered as a national historic landmark.</li>
<li>1909 - Wright began work on Taliesin (Welsh for ’Shining Brow’) — his own house and studio near Spring Green, Wisconsin, U.S.</li>
<li>1912 - He designed his first skyscraper. It was a slender concrete slab. While prophetic it was ultimately unbuilt.</li>
<li>1915 to 1922 - One of Wright’s most significant works — The Imperial Hotel — boasted unprecedented construction, lavish comforts and remarkable spaces. It was dismantled in 1967.</li>
<li>1922 - Catherine and Wright divorced.</li>
<li>1928 - Wright married Olgivanna Hinzenberg. Also around this time, the Taliesin was seized by the bank.</li>
<li>1929 - The stock market crash halted all activity in architecture. Wright spent these years lecturing at Chicago, New York City and Princeton, New Jersey.</li>
<li>1935 to 1937 - Fallingwater was designed and completed. Built near Mill Run, Pennsylvania, it is possibly Wright’s most admired work.</li>
<li>1956 to 1959 - The Guggenheim was built to house a permanent collection of abstract art.</li>
<li>1960 to 1962 - After Wright’s death, the Marin County Civic Center would rise under the watch of his protégé — Aaron Green.</li>
</ul>
</section>
.info-one {
background-size: contain;
background: url(images/flw-taliesin-interior-blkovr-94-800-1200-hf1.png);
background-repeat: no-repeat;
background-position: center;
color: #fff;
line-height: 1.3;
font-size: .7em;
max-width: 100%;
height: auto;
margin: 3em 0em 3em auto;
padding-top: 2em;
padding-right: 2em;
padding-bottom: 2em;
overflow: hidden;
}
.info-two {
background-size: contain;
background: url(images/flw-taliesin-interior-blkovr-94-800-1200-hf2.png);
background-repeat: no-repeat;
background-position: center;
color: #fff;
line-height: 1.3;
font-size: .7em;
max-width: 100%;
height: auto;
margin: 3em 0em 3em auto;
padding-top: 2em;
padding-right: 2em;
padding-bottom: 2em;
overflow: hidden;
}
如何使用图像制作响应式 3 行
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.