现在,图像的大小是响应式的,但文本遍布整个地方。我可以使用@Media查询,但有多少次,因为每个调整大小似乎分割文本。请让我知道如何实现响应多种屏幕尺寸的图像和文字。我想调整图像的大小以适合任何屏幕
这里的HTML:
<div class="jus-style"></div>
<div class="container-fluid">
<h1 class="main-heading text-center text-uppercase">Christopher Eric Hitchens</h1>
<div class="row">
<div class="overlay">
<img class="main-image img-responsive" src="hitchens1.jpg" alt="chris hitchens pic taken from the web. i don't own it">
<q class="over-image">Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are God. Whereas owners of cats are compelled to realize that, if you provide them with food and water and affection, they draw the conclusion that they are God.</q>
<p class="whosaidit"><cite><a href="https://www.brainyquote.com/quotes/quotes/c/christophe472423.html" rel="quotes by Chris Hitchens from Brainy Quote website" target="_blank">Brainy Quote</a></cite><small style="font-style: italic;"> - Christopher Hitchens</small></p>
</div>
</div>
Here's CSS:
.over-image {
position: absolute;
top: 1em;
right: 1em;
width: 50%;
margin-right: 3em;
padding-right: 10%;
padding-left: 20%;
padding-top: 200px;
color: white;
letter-spacing: 2px;
font-style: italic;
text-align: ;
}
.whosaidit {
position: absolute;
top: 29.7em;
right: 10em;
color: white;
}
a:hover {
color: green;
}
作品为文本,谢谢。但图像现在不调整视口大小。 – Prashanth