Моя проблема в значительной степени заключается в отзывчивости изображения в моем среднем ряду.
Я использую загрузчик 4, я пытался использовать разные классы, такие как img-Fluid, и у меня есть эти правила в моем объекте img в разделе стилей.
Я не могу жестко кодировать классы изображений, потому что это не для веб-сайта, это для страницы отображения. Пользователи перетаскивают изображения в область (которая в конечном итоге отображается ниже в моем среднем классе строк с #fullColumn), так что это статическое отображение страницы. Кроме того, изображения сохраняются через TinyMCE, поэтому они всегда заключаются в
теги
Верхняя область строки - это верхний колонтитул, который всегда находится вверху страницы, в то время как нижний раздел строки всегда прилипает к нижней части страницы, чего я и хочу. Тем не менее, моя #fullColumn область, кажется, всегда остается между этими двумя, как и должно, именно так, как я хочу, но если в этой области есть ОГРОМНОЕ изображение, то оно прорывается за верхнюю часть строки и / или нижнюю строку и полностью выходит за пределы #fullColumn. Если я проверю это, #fullColumn все еще будет находиться между верхней и нижней строкой, но изображение полностью со страницы.
Пользователи просматривают это на компьютере при создании страницы, поэтому им нужно убедиться, что она соответствует области, но в конечном итоге она отображается на 55-70-дюймовых цифровых дисплеях, поэтому в обоих случаях мне нужны любые и все изображения. в области #fullColumn, чтобы просто центрировать и масштабировать соответствующим образом. Если пользователь помещает изображение 2000x2000 пикселей в эту область, мне нужно, чтобы оно располагалось по центру и между верхним и нижним рядами либо на компьютере, либо на дисплее.
Как я могу просто убедиться, что все изображения достаточно уменьшены и центрированы в моей средней области?
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
iframe{
height:100% !important;
width:100% !important;
}
.middle p{
max-height:100%;
}
img {
max-width: 100%;
height:auto;
margin:0 auto;
}
#fullContent{
display:flex;
justify-content:center;
align-items:center;
}
.fullContent > img{
max-width: 100%;
height: auto;
}
#fullContent> img{
max-width: 100%;
height: auto;
}
.my-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
width:100vw;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #778899 ;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding:30px;
background-size: cover;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container-fluid my-container d-flex h-100">
<div class="row top">
<div class="row">
<div class="col-lg-12">
<div class="row" style="background-color: #929292;">
<h3>Top Row</h3>
</div>
</div>
</div>
</div>
<div class="row middle" id="middle" style="background-image: url();">
<div class="col-lg-12" id="fullColumn">
<div class="fullContent" id="fullContent" style="height: 100%; ">
<p>
<img src="https://via.placeholder.com/2000">
<p>
</div>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12">
<div class="row"><h2 style="margin: 40px;">Bottom Row</h2></div>
</div>
</div>
</div>