我正在做一个数字艺术展览，它将合并音乐，图像和图片的音频描述。这是一个Laravel项目与Bootstrap，我有一个小困难与图片的响应。因为我是完全失明的，因为我出生以来，这是相当困难的工作与图像，因为我显然不能看到我在做什么。😊我的视力的朋友告诉我，图像看起来很好的移动的和电脑，但在平板电脑/iPad上，它们太大了，无法缩放。我无法理解为什么它不能按预期工作。这里是我的head标签，其中包括bootstrap包：
<!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文件中，我有下面一行，我猜是由Laravel创建的：
img,
svg {
vertical-align: middle;
}那会有什么问题吗？现在感觉完全迷失了！：）
用于在图像和音乐文件之间进行选择的JavaScript位于不同的文件中，但我不认为是JS导致了这里的问题。😊
该网站实际上已经发布在一个域上，所以如果你想看到的图像在行动中，你可以去：https://circusfreak.se/exhibition/index
以下是iPad上图像的屏幕截图：enter image description here据我所知，图像在肖像模式下看起来不错，但在风景模式下看起来不好。请告诉我，如果你需要在项目中看到其他东西才能完全理解上下文！
任何帮助将不胜感激！
一切顺利！
1条答案
按热度按时间tzdcorbm1#
您可能需要使用针对特定方向的CSS媒体查询，如