时间戳

首页 > 解决方案 > 超出 div 标签的图像

html - 超出 div 标签的图像

问题描述

我有一个由 12 个 div 标签组成的网格，每个标签中间都有一个图像。这适用于大多数显示器，但我的客户有一个超宽的 34 英寸显示器。在这一点上，div 将按预期伸展，但每个图像都超出了 div 的范围。知道如何阻止吗？

这是 12 个 div 之一的示例

<div class="mainHeaders font-weight-bold"><h2>Store</h2><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Have a game to sell? Click here! <img src="/images/pacman.png" alt="" style="width: 20px;"></a></div>
<div class="row" id="gamerow">
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <img src="/images/logos/sega.png" alt="Avatar" class="image img-fluid">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav" style="font-size: 0.8rem;">
          @foreach($segaCategories as $sega)
          <li><a href="{{route('games.show', $sega->id)}}">{{ucfirst($sega->name)}}</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <img src="/images/logos/nintylogo.png" alt="Avatar" class="image img-fluid">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav" style="font-size: 0.7rem;">
          @foreach($nintCategories as $nint)
          <li><a href="{{route('games.show', $nint->id)}}">{{ucfirst($nint->name)}}</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <img src="/images/logos/pslogo.png" alt="Avatar" class="image img-fluid">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav">
          @foreach($psCategories as $ps)
          <li><a href="{{route('games.show', $ps->id)}}">{{ucfirst($ps->name)}}</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <img src="/images/logos/xboxlogo.png" alt="Avatar" class="image img-fluid max-width: 100%">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav" style="font-size: 1.2rem;">
          @foreach($xboxCategories as $xbox)
          <li><a href="{{route('games.show', $xbox->id)}}">{{ucfirst($xbox->name)}}</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <img src="/images/logos/amigalogo.png" alt="Avatar" class="image img-fluid">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav">
          @foreach($amigaCategories as $amiga)
          <li><a href="{{route('games.show', $amiga->id)}}">All&nbspGames</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <img src="/images/logos/atarilogo.png" alt="Avatar" class="image img-fluid">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav">
          @foreach($atariCategories as $atari)
          <li><a href="{{route('games.show', $atari->id)}}">All&nbspGames</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
</div>
<div class="row" id="gamerow">
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <p id="eightBit">8-Bit</p>
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav">
          @foreach($bitCategories as $bit)
          <li><a href="{{route('games.show', $bit->id)}}">All&nbspGames</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <img src="/images/logos/3do.png" alt="Avatar" class="image img-fluid">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav">
          @foreach($doCategories as $do)
          <li><a href="{{route('games.show', $do->id)}}">All&nbspGames</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <img src="/images/logos/cdi.png" alt="Avatar" class="image img-fluid">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav">
          @foreach($cdiCategories as $cdi)
          <li><a href="{{route('games.show', $cdi->id)}}">All&nbspGames</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <img src="/images/logos/neo.png" alt="Avatar" class="image img-fluid">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav">
          @foreach($neoCategories as $neo)
          <li><a href="{{route('games.show', $neo->id)}}">All&nbspGames</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <img src="/images/logos/pcengine.png" alt="Avatar" class="image img-fluid">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav">
          @foreach($pcCategories as $pc)
          <li><a href="{{route('games.show', $pc->id)}}">All&nbspGames</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <p class="import">Imports and other consoles</p>
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav">
          @foreach($importCategories as $import)
          <li><a href="{{route('games.show', $import->id)}}">All&nbspGames</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
</div>
<div class="row" id="gamerow">
<div class="col-4 col-lg-2 gamesCategories offset-md-4">
  <div class="container">
    <img src="/images/logos/cdi.png" alt="Avatar" class="image img-fluid">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav">
          @foreach($cdiCategories as $cdi)
          <li><a href="{{route('games.show', $cdi->id)}}">All&nbspGames</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-4 col-lg-2 gamesCategories">
  <div class="container">
    <img src="/images/logos/neo.png" alt="Avatar" class="image img-fluid">
    <div class="overlay">
      <div class="text">
        <ul class="navbar-nav">
          @foreach($neoCategories as $neo)
          <li><a href="{{route('games.show', $neo->id)}}">All&nbspGames</a></li>
          @endforeach
        </ul>
      </div>
    </div>
  </div>
</div>
</div>

这是它背后的scss：

.image {
  display: inline-block;
  margin-top: 45px;
  max-width: 100%;
  max-height:100%;
  vertical-align: middle;
}

标签： htmlcsssass

解决方案

您可能想要使用 object-fit 属性：

.image {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

这将确保您的图像适合父 div（但保持其原始比例）。

推荐阅读