Я пытаюсь иметь масштаб div с размером окна, чтобы он мог соответствовать содержимому и все в нем масштабировалось вместе - PullRequest
Новая
       28

Я пытаюсь иметь масштаб div с размером окна, чтобы он мог соответствовать содержимому и все в нем масштабировалось вместе

0 голосов
/ 09 июля 2020

Я нашел эту статью: https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

Я попытался адаптировать ее к своему коду, но ничего не происходит. загружаемый iframe - это, по сути, изображение, которое я помещаю вместе с PHP в другой файл. Я потратил сегодня 8 часов, пытаясь найти способ, чтобы это работало, без какого-либо прогресса. есть ли что-то, что изменилось после этой статьи, из-за чего она больше не работает? 


<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> 
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
    
<style type="text/css">

body {
    margin: 0px;
    background-color: transparent;
    font-family: 'Bebas Neue';
}

input {
    width: 100%;
    height: 30%;
    max-height: 75px;
    max-width: 550px;
    padding: 1% 1%;
    font-size: 35px;
    border: 0;
}

button {
    padding: 1% 1%;
    position: relative;
    top: 50%;
    border: 0;
    font-size: 15px;
    background-color: white;
    transform: translate(0%, -25%);
}

.searchbar {
    background-color: white;
    width: 50%;
    max-width: 600px;
    min-width: 592px;
    margin: 1% 1%;
    border-radius: 2px;
    overflow: visible;
}

.frame {
    overflow: hidden;
    padding-top: 178%;
    position: relative;
    margin: 0px;
}

.frame iframe {
    border: 1px 1px 1px 1px;
    height: 90%;
    position: absolute;
    top: 0;
    width: 98%;
    max-width: 700px;
    max-height: 1351px;
    min-width: 595px;
    min-height: 1149px;
    margin: 0px;
    transform: translate(-50%, 0%);
}

.scalesize {
    transform-origin: center 0;
    height: 1450px;
    width: 710px;
}
    @media (max-width: 750) {
    .scaler
        width: 100%;
    }
}

</style>

    <meta charset="UTF-8">
    <meta http-Equiv="Cache-Control" Content="no-cache" />
    <meta http-Equiv="Pragma" Content="no-cache" />
    <meta http-Equiv="Expires" Content="0" />

</head>

<script type="text/javascript" src="./lib/jquery-3.5.1.min.js">

var $el = $("#scalesize");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();

var $wrapper = $("#scaler");

$wrapper.resizable({
  resize: doResize
});

function doResize(event, ui) {
  
  var scale, origin;
    
  scale = Math.min(
    ui.size.width / elWidth,    
    ui.size.height / elHeight
  );
  
  $el.css({
    transform: "scale(.7)"
  });
  
}

var starterData = { 
  size: {
    width: $wrapper.width(),
    height: $wrapper.height()
  }
}
doResize(null, starterData);

</script>
    
<body>

<center>
<div class="scaler">
<div class="scalesize">

<div class="searchbar">

<form action="./optaviarecognition/php/return.php" method="post" target="show">
<input type="text" list="names" name="keyword" onmousedown="value = '';" autocomplete="off" />
<datalist id="names" name="keyword">
<?php
    $fileHandle = fopen("./optaviarecognition/recognition.csv", "r");
    while (($row = fgetcsv($fileHandle, 0, ",")) !== FALSE) {
        $cats = $row[0];
?>
    <option value="<?php echo $cats;?>"><?php echo $cats;?></option>
<?php
    }
?>
</datalist>

<button type="submit" name="search"> <i class="fa fa-search"></i> </button>
</form>

</div>

<div class="frame">

<iframe name="show" src="/optaviarecognition/php/return.php"></iframe>

</div>

</div>
</div>

</center>
    


</body>
</html>
...