Question

我想要一张能够响应页面宽度变化的图片，并且该图片与图片宽度相匹配，不会分成两行，并且总是填写div宽度。

我无法解决这个问题。我创建了这个Plunker来说明我的问题： Plunker - Make text fit to div

如何使文字重新调整大小以适应图片宽度？我知道已经设置了字体大小与vw，以使其缩放，但这也使得它在电话中显示页面时非常小。

拜托，我可以帮忙了解如何开展这项工作。

Plunker代码：

HTML：

<body>

<p class="spacer"></p>

<img class="img-responsive page-pic" src="https://placehold.it/800x300" />
<h3 class="page-pic-text">
  abcdefghijklmnopq abc abcdefghijklmn
</h3>
<h1 class="page-text">
  Abcdefghi, abc abc abcde abcde!
</h1>
<BR />
<BR />
<BR />
<BR />
<BR />
<BR />
<h3>How to make the first and second text to match the pictures width?</h3>
</body>

CSS：

.spacer {
  height: 60px;
}

.page-pic {
    margin: 0 auto;
    width: 35%;
    min-width: 260px;
}

.page-pic-text {
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
    font-size: 130%;
    font-size: 1.357vw;
    font-style: normal;
    font-variant: small-caps;
    font-weight: 500;
    letter-spacing: 0.3em;
    margin: 1% auto;
    width: 35%;
    min-width: 260px;
    text-align: center;
}

.page-text {
    font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif;
    font-size: 150%;
    font-size: 2.2vw;
    font-style: normal;
    font-variant: normal;
    font-weight: 200;
    vertical-align: bottom;
    margin: 0% auto;
    padding-top: 3%;
    width: 35%;
    min-width: 260px;
    text-align: center;
}

Answer 1

这是你想要的吗？根据需要更改宽度和高度。我使用了内联css。如果你想使用外部css并希望你的bootstrap工作正常。我使用了脱机引导程序，所以不要引起你的注意。只需查看html。

<!DOCTYPE html>
<html>
<head>
  <title>working with bootstrap offline</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" type="text/css" href="index.css">

  <style type="text/css">
    body{
      margin:0;
      padding:0;
    }

    .page-pic-text {
      font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
      font-size: 130%;
      font-size: 1.357vw;
    font-style: normal;
      font-variant: small-caps;
      font-weight: 500;
      letter-spacing: 0.3em;
      margin: 1% auto;
      width: 35%;
      min-width: 260px;
      text-align: center;
    }

  </style>

</head>
<body>

  <div class="container-fluid">
    <div class="img-responsive" style="width:50%;height:50%;">
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg" style="width:100%;height:100%;">
      <h2 class="page-pic-text" style=""> is this what you want</h2>
    </div>
  </div>
 
  <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>

</body>



</html>

Answer 2

简单回答：没有javascript就无法实现。

CSS - 使文本适合div宽度并做出响应

2 个答案: