Я до сих пор застрял в этой проблеме с моей CMS и с тем, как сделать так, чтобы пользователь мог перетаскивать изображение любого размера в столбец / строку (начальную загрузку), и оно будет масштабироваться в соответствии с размером.
Прежде всего, это не для веб-сайта, а для CMS, где пользователи создают статические страницы, которые будут отображаться на цифровых дисплеях, поэтому прокрутки не будет вообще. В верхнем и нижнем рядах есть баннер (верхний колонтитул) и тикер / нижний колонтитул, затем в среднем ряду есть основной столбец, в котором будут располагаться изображения. Поэтому, несмотря ни на что, изображения, перетаскиваемые в эту область, должны масштабироваться так, чтобы изображение оставалось в области столбца, которая остается между верхним и нижним колонтитулами.
В настоящее время я могу перетаскивать изображение разумного размера, и оно отлично сидит, но если я помещаю туда огромное изображение, оно полностью разбивает средний ряд / столбец И также пробивает нижний колонтитул, в отличие от уменьшения до нужного размера. , это должно быть максимально отзывчивым, вписываясь в границы. Примеры этих двух:
Большое изображение-заполнитель, разбивающее столбец
Таким образом, на изображениях красная область - это столбец / строка начальной загрузки, о которых идет речь. 2-е изображение показывает заполнитель 2000x2000, выходящий из области и за нижний ряд тикером. На обоих изображениях темно-серые полосы - верхний и нижний ряды.
Опять же, независимо от того, какой размер изображения пользователь перетаскивает в эту область и сохраняет, независимо от того, на каком экране он отображается, в нем всегда должны быть верхний и нижний ряды с колонкой в середине с масштабированным изображением.
Мой код ниже
Как именно я могу исправить это, чтобы мне не пришлось беспокоиться о том, что пользователи перетаскивают массивные изображения в область, и они не будут отображаться должным образом после сохранения?
<style type="text/css">
@import "style.css";
html,
body {
height: 100%;
width:100%;
overflow: hidden;
}
.middle iframe{
height:100% !important;
width:100% !important;
}
.middle p{
max-height:100%;
}
img{
max-width: 100%;
height: auto;
}
.fullContent > img{
max-width: 100%;
height: auto;
}
.topLeftContent > img{
max-width: 100%;
height: auto;
}
.bottomLeftContent > img{
max-width: 100%;
height: auto;
}
.rightContent > img{
max-width: 100%;
height: auto;
}
.leftContent > img{
max-width: 100%;
height: auto;
}
.topRightContent > img{
max-width: 100%;
height: auto;
}
.bottomRightContent > img{
max-width: 100%;
height: auto;
}
.modal-lg {
max-width: 80% !important;
}
.my-container {
display: flex;
flex-direction: column;
height: 100vh;
width:100%;
}
.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-image: url('images/bg6.jpg');
background-size: cover;
}
</style>
<div class="row top">
<div class="row">
<div class="col-lg-12" style="background-color:grey">
<div class="row" style="background-color: #929292;">
TOP
</div>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 15px;">
<p>(Content must fit within bounds of dotted border)</p>
</div>
<div class="row middle" id="background">
<form><input type="hidden" name="panel" value="background"></form>
<div class="col-lg-12 fullWidth" id="full">
<form><input type="hidden" name="panelFull" value="full"></form>
<div class="fullContent" style="background-color: red; height: 100%; border: dotted 1px black;">
<img src="https://via.placeholder.com/2000">
</div>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12" style="background-color:grey">
<div class="marquee"><h2>Ticker</h2></div>
</div>
</div>