时间戳

首页 > 解决方案 > 当浏览器水平调整大小时，图像会缩小

html - 当浏览器水平调整大小时，图像会缩小

问题描述

当我水平调整浏览器大小时，图像会缩小，但我希望图像在他的 div 父级中具有 100% 的高度。

我不能使用高度，因为它会导致另一个问题，浏览器垂直调整大小。我能做些什么？

调整大小之前： 在此处输入图像描述

调整大小后： 在此处输入图像描述

#poster {
  display: flex;
  width: 100%;
  align-items: center;
}

#poster__img {
  width: 65%;
}

#poster__img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#poster__content {
  width: 35%;
  padding: 50px;
  flex-wrap: wrap;
}

#poster__content h3 {
  padding-bottom: 10px;
}
<div id="poster">
  <div id="poster__img">
    <img id="poster1" src="https://via.placeholder.com/320x240" alt="">
  </div>
  <div id="poster__content">
    <h3>Le categorie</h3>
    <p>
      <pre>
                        Concerti:
                            Questa è la nostra più grande categoria dove si possono trovare i biglietti per i concerti di tanti generi, tra cui il Pop & Rock, Jazz, Metal e anche i biglietti per i festival.
    
                        Sport:
                            Questa è la categoria per gli amanti dello sport, in cui si possono acquistare i biglietti per seguire la propria squadra del cuore in svariati sport: Calcio, Tennis, Basket, Rugby, Formula 1 e MotoGP.
                            
                        Mostre e musei:
                            Questa è la categoria per gli amanti della cultura e a chi piace l'arte in ogni sua tipologia. Abbiamo i biglietti per le mostre d'arte e di storia, nonchè anche per i musei e siti archeologici.
    
                        Teatro:
                            Questa è la categoria per chi vuole godersi uno spettacolo che potrà essere un Musical e varietà, Prosa, Teatro lirico, Cabaret, Balletto classico e moderno oppure concerti di musica classica.
                        </pre>
    </p>
    <a id="compra" href="eventi.php"><button>Acquista biglietti</button></a>
  </div>
</div>

标签： htmlcss

解决方案

这是因为你align-items: center在你的 flex 容器中，所以它可以防止图像增长到填充高度。删除它并让您的内容弯曲，然后您可以将内容对齐到中心：

#poster {
  display: flex;
  width: 100%;
}

#poster__img {
  width: 65%;
}

#poster__img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#poster__content {
  width: 35%;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#poster__content h3 {
  padding-bottom: 10px;
}
<div id="poster">
  <div id="poster__img">
    <img id="poster1" src="http://www.fillmurray.com/500/500" alt="">
  </div>
  <div id="poster__content">
    <h3>Le categorie</h3>
    <pre>
        Concerti:
            Questa è la nostra più grande categoria dove si possono trovare i biglietti per i concerti di tanti generi, tra cui il Pop & Rock, Jazz, Metal e anche i biglietti per i festival.

        Sport:
            Questa è la categoria per gli amanti dello sport, in cui si possono acquistare i biglietti per seguire la propria squadra del cuore in svariati sport: Calcio, Tennis, Basket, Rugby, Formula 1 e MotoGP.

        Mostre e musei:
            Questa è la categoria per gli amanti della cultura e a chi piace l'arte in ogni sua tipologia. Abbiamo i biglietti per le mostre d'arte e di storia, nonchè anche per i musei e siti archeologici.

        Teatro:
            Questa è la categoria per chi vuole godersi uno spettacolo che potrà essere un Musical e varietà, Prosa, Teatro lirico, Cabaret, Balletto classico e moderno oppure concerti di musica classica.
        </pre>
    <a id="compra" href="eventi.php"><button>Acquista biglietti</button></a>
  </div>
</div>

此外，您不能将pre标签放在p

推荐阅读