我想调整图像的大小以适合任何屏幕
问题描述：
现在，图像的大小是响应式的，但文本遍布整个地方。我可以使用@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;
}
答
你可以设置你的形象在这种情况下，覆盖类设定为保持背景图像元素的背景图像。我使用flexbox属性在内部构建内容，但您可以根据自己的需要来调整它。内容将一起调整大小。 Fiddle
.overlay{
background-image: url("https://placehold.it/500x400");
background-size: cover;
background-position: center center;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a:hover {
color: green;
}<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">
<p 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.</p>
<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>
答
你可能想在Viewport Sized Typography
CSS3来看看这里有相对于当前 视口大小大小事情了一些新的价值观：大众， vh和vmin。现在需要调出 ，因为它是在Chrome 20（在写这篇 的时候是金丝雀）发货的。而不是落在一面旗帜之后，它就会起作用。生产用法并不是 ，但它会很快。
下面是浏览器支持information
如何使用他们？
实例：
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
这里是一个demo website使用此。
DEMO GIF
答
明白了。这就是我所做的。
我在下面添加了一个部分并对其进行了设置。然后媒体查询匹配最少的视图端口。
.overlay {
margin: 0 auto;
height: 600px;
width: 100%;
display: inline-block;
top: 0;
background: url("hitchens1.jpg") no-repeat 50% 50%;
background-size: cover;
}
.quotation {
max-width: 30%;
margin-left: 60%;
text-align: left;
color: white;
margin-top: 8em;
letter-spacing: 2px;
font-style: italic;
text-align: justify;
}
@media screen and (max-width: 480px) {
.quotation {
padding-bottom: 50%;
}
.overlay {
height: 100%;
width: 100%;
background: url("hitchens1.jpg") no-repeat 30% 30%;
}
}<div class="overlay">
<section class="quotation">
<q>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>
</section>
</div>
作品为文本，谢谢。但图像现在不调整视口大小。 – Prashanth