Laravel+Bootstrap项目图片在iPad横屏显示过大且无法缩放求助

我正在开发一个结合音乐、图片与图片音频解说的数字艺术展项目，基于Laravel框架和Bootstrap搭建。因先天全盲无法直接查看图片效果，经视力正常的朋友反馈：图片在电脑和移动端显示正常，但在iPad横屏模式下尺寸过大且无法缩放，竖屏模式则显示正常。

头部标签代码 #

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>


<title>Circus Freak</title>
<style>
@font-face {
src: url('/../Fonts/Circus.ttf');
font-family: "circus";
}
body {
font-family: arial;
}
</style>
</head>

展览页面代码 #

<x-layout>
<div class="container">
<h1>VÄLKOMMEN TILL UTSTÄLLNINGEN</h1>
<H2>
Välj den tavla du vill se
</H2>
<div class="row">
<div class="col">
<div class="btn-group" role="group" aria-label="Tavlor">
<button class="btn btn-secondary" onclick="switchPictures(1)" >Apan</button>
<button class="btn btn-secondary" onclick="switchPictures(2)" >Hunden</button>
<button class="btn btn-secondary" onclick="switchPictures(3)" >Fågeln</button>
<button class="btn btn-secondary" onclick="switchPictures(4)">Pandan</button>
<button class="btn btn-secondary" onclick="switchPictures(5)">Clownen</button>
<button class="btn btn-secondary" onclick="switchPictures(6)">Hästen</button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<h2>Lyssna på den aktuella tavlans musik</h2>
<audio id="music" tilte="musik" controls>
  <source src="../audio/music1.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
</div>
<div class="col">
<h2>Lyssna på syntolkningen av aktuell tavla</h2>
<audio id="desc" tilte="Syntolkning" controls>
  <source src="../audio/desc1.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
</div>
</div>
</div>
<img id="picture" src="../images/picture1.jpg" alt="Nu visas: Tavla 1 - Apan" class="img-fluid">
</div>
</x-layout>

Public/Css/App.css相关代码 #

img,
svg {
  vertical-align: middle;
}

问题分析与解决方案 #

• App.css中vertical-align: middle不会导致该问题，这个属性仅控制元素垂直对齐，和尺寸缩放无关。
• 问题根源大概率是iPad横屏的分辨率（约1024px）处于Bootstrap响应式断点的过渡区间，导致图片的自适应规则未生效。

推荐以下解决方案：

1. 强制图片自适应容器：给图片添加自定义CSS，确保它始终不超出容器宽度

   #picture {
     max-width: 100%;
     height: auto;
     display: block;
   }
   

   img-fluid本身包含类似规则，但显式声明可避免被其他样式覆盖。

2. 优化viewport设置：修改meta标签，添加shrink-to-fit=no解决iOS Safari的适配问题

   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   

3. 利用栅格系统约束图片：将图片包裹在Bootstrap的栅格容器中，确保宽度被正确限制

   <div class="row mt-4">
     <div class="col">
       <img id="picture" src="../images/picture1.jpg" alt="Nu visas: Tavla 1 - Apan" class="img-fluid">
     </div>
   </div>
   

内容的提问来源于stack exchange，提问作者NK94