Question

现在，图像的大小是响应的，但文本到处都是。我可以使用@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;
}

Answer 1

您可以将图像设置为元素的背景图像，在这种情况下，overlay类设置为保存背景图像。我使用flexbox属性在内部构建内容，但您可以根据需要进行调整。内容将一起调整大小。 Fiddle

＆＃13;

.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;
}

＆＃13;

    <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>

＆＃13;

Answer 2

您可以在 Viewport Sized Typography

上查看

CSS3有一些新值可用于调整与当前相关的内容视口大小：vw，vh和vmin。现在提出来，因为它在Chrome 20（当时的金丝雀）中发货写作）。而不是在旗帜后面，它只是有效。生产用量不是在那里，但很快就会到来。

以下是浏览器支持information

如何使用它们？

<强>示例：

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

以下是使用此内容的demo website。

DEMO GIF

Answer 3

知道了。这就是我所做的。

我在下面添加了一个部分并对其进行了样式化。然后媒体查询匹配最少视图端口。

.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>

我想调整文本大小以适应任何屏幕

3 个答案: