Question

我正在尝试使文本对图像响应，以便它们可以一起缩放，但不能使文本随图像缩放并仍然保持其位置。我正在使用vw缩放文本，但不知道使其保持在图像上的位置吗？我希望文本与图像平行缩小，并且如果它们缩小（响应），则它们之间的比例保持不变。

我尝试将图像和容器更改为绝对值，但问题仍然存在。

img {
  position: absolute;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 900px;
  max-width: 1364px;
  width: 100%;
  height: auto;
  box-shadow: 10px 10px 5px grey;
}

.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  color: bisque;
  font-style: italic;
  font-family: Verdana;
  font-size: 0.6vw;
}

.top-left-text {
  position: absolute;
  top: 8px;
  left: 620px;
  text-align: left;
}

.top-middle-text {
  position: absolute;
  top: 8px;
  left: 1140px;
  text-align: left;
}

<div class="container">
  <img alt="lagaremeny" height="703" src="lagaremeny.png" width="1376">
  <div class="top-left-text">

    <div class="auto-style1">

      <strong>Sallader</strong>
    </div>
    <ul>
      <li>Kycklingsallad 69kr</li>
      <li>Amerikansk sallad 69kr</li>
      <li>Grekisk sallad 69kr</li>
      <li>Tonfisk, ägg och rödlök 69kr</li>
      <li>Västkuströra och ägg 74kr</li>
      <li>Skagenröra och ägg 74kr</li>
      <li>Salami och sallads ost 74kr</li>
      <li>Kebabröra 69kr</li>
      <li>Räkor Handskalade Lyxräkor (MFC märkt) 94kr</li>
    </ul>
    Alla våra sallader består av en bas med isbergssallad,<br> ruccola, röd mangold, röda blad, máche, gurka,<br> mix av körsbergstomater och pasta/eller mer<br> grönsallad och paprika.<br> I alla sallader ingår dressing och bröd.
    <br><br>Dressing: Vitlök, Mango curry, Vinaigrette, Curry,<br> Rhodeisland, Blue cheese, Honung o dijong, Mangoraja.
  </div>
  <div class="top-middle-text">
    <div class="auto-style1">
      <strong>Arbetarmackor</strong></div>
    <ul>
      <li>Ägg och biff</li>
      <li>Ägg och bacon</li>
      <li>Ägg och korv</li>
      <li>Ägg, köttbullar och rödbetssallad</li>
      <li>Ägg och sill</li>
      <li>Ägg och västkustsallad</li>
      <li>Leverpastej</li>
      <li>Ost och paprika</li>
      <li>Ost och skinka</li>
      <li>Köttbullar och rödbetssallad</li>
      <li>Rostbiff och potatissallad</li>
    </ul>
    Alla arbetarmackor: 59kr/st.
    <br>Standardtillbehör: sallad, gurka och tomat.
  </div>

当我尝试按比例缩小窗口时，文本会缩小，但会随着图像的缩小和位置的变化而保持位置

Answer 1

如果可以使用外部库，则可以尝试使用此jQuery插件FitText.js。

否则，这是一个使用窗口resize事件侦听器并更新字体大小（根据父容器的宽度计算）的解决方案。

您可以通过以下方式将JavaScript移动到html文件中，方法是将其包含在html文件中：

<script defer>
  setFontSize('container', 14)

  function setFontSize (containerClassName, fontScale) {
    resizeFontInContainer() // initialize the page with scaled font
    window.addEventListener('resize', resizeFontInContainer) // add event listener for window resize

    function resizeFontInContainer () {
      let containers = document.getElementsByClassName(containerClassName)
      for (var i = 0; i < containers.length; i++) {
        let containerWidth = containers[i].offsetWidth
        containers[i].style.fontSize = `${containerWidth * fontScale / 1000}px`
      }
    }
  }
</script>

仅供参考，我必须更改您的某些CSS才能针对您的特定情况进行这项工作。

setFontSize('container', 14)

function setFontSize (containerClassName, fontScale) {
  resizeFontInContainer() // initialize the page with scaled font
  window.addEventListener('resize', resizeFontInContainer) // add event listener for window resize

  function resizeFontInContainer () {
    let containers = document.getElementsByClassName(containerClassName)
    for (var i = 0; i < containers.length; i++) {
      let containerWidth = containers[i].offsetWidth
      containers[i].style.fontSize = `${containerWidth * fontScale / 1000}px`
    }
  }
}

img {
  position: absolute;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 900px;
  max-width: 1364px;
  width: 100%;
  height: auto;
  box-shadow: 10px 10px 5px grey;
}

.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  color: bisque;
}

.top-left-text {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-middle-text {
  position: relative;
  display: table;
  top: 8px;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>

<head></head>

<body>

  <div class="container">
    <img alt="lagaremeny" height="703" src="https://picsum.photos/200" width="1376">
    <div class="top-middle-text">
      <div class="auto-style1">
        <strong>Arbetarmackor</strong></div>
      <ul>
        <li>Ägg och biff</li>
        <li>Ägg och bacon</li>
        <li>Ägg och korv</li>
        <li>Ägg, köttbullar och rödbetssallad</li>
        <li>Ägg och sill</li>
        <li>Ägg och västkustsallad</li>
        <li>Leverpastej</li>
        <li>Ost och paprika</li>
        <li>Ost och skinka</li>
        <li>Köttbullar och rödbetssallad</li>
        <li>Rostbiff och potatissallad</li>
      </ul>
      Alla arbetarmackor: 59kr/st.
      <br>Standardtillbehör: sallad, gurka och tomat.
    </div>
    <div class="top-left-text">

      <div class="auto-style1">

        <strong>Sallader</strong>
      </div>
      <ul>
        <li>Kycklingsallad 69kr</li>
        <li>Amerikansk sallad 69kr</li>
        <li>Grekisk sallad 69kr</li>
        <li>Tonfisk, ägg och rödlök 69kr</li>
        <li>Västkuströra och ägg 74kr</li>
        <li>Skagenröra och ägg 74kr</li>
        <li>Salami och sallads ost 74kr</li>
        <li>Kebabröra 69kr</li>
        <li>Räkor Handskalade Lyxräkor (MFC märkt) 94kr</li>
      </ul>
      Alla våra sallader består av en bas med isbergssallad,<br> ruccola, röd mangold, röda blad, máche, gurka,<br> mix
      av körsbergstomater och pasta/eller mer<br> grönsallad och paprika.<br> I alla sallader ingår dressing och bröd.
      <br><br>Dressing: Vitlök, Mango curry, Vinaigrette, Curry,<br> Rhodeisland, Blue cheese, Honung o dijong,
      Mangoraja.
    </div>

</body>

</html>

让我知道您是否正在尝试这样做。如果没有，请让我更具体地了解您的需求。

自动调整文字大小以适合图像容器

1 个答案: