Как остановить растяжение изображения внутри div?

Question 1

У меня есть html-форма, которая принимает данные от пользователя и код php, который берет input из указанной папки. Затем он извлекает каждое изображение из этой папки и отображает его в виде слайд-шоу.

Проблема в том, что изображение растягивается по ширине и выглядит ужасно. Я попробовал тактику подгонки объекта среди других тактик, которые я нашел в Интернете, но ни одна из них, похоже, не работает.

Как сохранить соотношение сторон изображений в цикле слайд-шоу?



<html>
<head>
<style = "text/css">

</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://malsup.github.com/jquery.cycle2.js"></script>

<?php

$images = array();
$directory = 'images '.$_POST["name"];   

if ($handle = opendir($directory)) {

while (false !== ($file = readdir($handle))) {

if (preg_match("/\.png$/", $file)) $images[] = $file;

elseif (preg_match("/\.jpg$/", $file)) $images[] = $file;

elseif (preg_match("/\.jpeg$/", $file)) $images[] = $file;

elseif (preg_match("/\.gif$/", $file)) $images[] = $file;

}

shuffle($images);

closedir($handle);

}

?>

<div class="cycle-slideshow">

<?php

for($i= 0; $i < 3; $i++) {

  foreach ( new DirectoryIterator($directory) as $item ) {            
        if ($item->isFile()) {
            $path = $directory . '/' . $item;   
            echo '<img src="' . $path . '" class="displayed" 
   height= "512px"
   object-fit= "contain"
   width = "75%"


   display: "block"
   margin: "auto"
    border= "3px solid #73AD21" />';  
        }
    }  



}

?>

</div>

</body>
</html>

javascript php jquery html css

-1

Mahim Dhungel 28 Окт 2019 в 10:32

Попробуйте удалить width="75%" - поскольку он имеет height, он должен правильно масштабироваться

–

Professor Abronsius

28 Окт 2019 в 10:39

При таком подходе изображение поместилось внутри div, но размер div также изменился. я хочу, чтобы div (цикл-слайд-шоу) оставался постоянным, а изображения внутри него подходили соответственно.

–

Mahim Dhungel

29 Окт 2019 в 16:09

Лучше всего было бы удалить ВСЕ встроенные стили и сосредоточиться на использовании внешнего CSS для управления размерами — возможно, подход flex-box?! Поскольку никто, кроме вас, не знает, какие стили применяются к каким элементам, вы не можете ожидать окончательного решения.

–

Professor Abronsius

29 Окт 2019 в 22:25

Я пробовал и с внешним css. никуда не мог попасть. вот мой исходный код drive.google.com/file/d/1rTLLj3XcCYwknG7n21Lm0Hrbrb6S2prq/view

–

Mahim Dhungel

1 Ноя 2019 в 20:04

Answer

Вы должны удалить width = "75%, потому что у вас уже есть инициализированная высота. Вы также можете добавить padding к изображениям в файле CSS. Примечание. Для использования заполнения вы должны использовать box-sizing: border-box. Используя border-box, вы фактически добавляете это дополнение в пределах размеров вашего поля и предотвращаете его изменение ширины или высоты. Я не проверял это, но надеюсь, что понял ваш вопрос.

0

Mirza C 28 Окт 2019 в 10:51

Это может показаться глупым, но я написал box-sizing: border-box внутри части кода «img src», а также попытался написать ее в части css. но оба не работали. Я написал это так: .cycle-slideshow{box-sizing: border-box}. это правильно? также извиняюсь за липкий комментарий.

–

Mahim Dhungel

29 Окт 2019 в 16:12

Вы пробовали object-fit: cover; ? Или, если вы можете, вы можете предоставить нам чистый код html и css, чтобы мы могли увидеть все потенциальные элементы, которые вызывают эту проблему.

–

Mirza C

30 Окт 2019 в 11:05

Question 2

Вы должны удалить width = "75%, потому что у вас уже есть инициализированная высота. Вы также можете добавить padding к изображениям в файле CSS. Примечание. Для использования заполнения вы должны использовать box-sizing: border-box. Используя border-box, вы фактически добавляете это дополнение в пределах размеров вашего поля и предотвращаете его изменение ширины или высоты. Я не проверял это, но надеюсь, что понял ваш вопрос.

0

Mirza C 28 Окт 2019 в 10:51

Это может показаться глупым, но я написал box-sizing: border-box внутри части кода «img src», а также попытался написать ее в части css. но оба не работали. Я написал это так: .cycle-slideshow{box-sizing: border-box}. это правильно? также извиняюсь за липкий комментарий.

–

Mahim Dhungel

29 Окт 2019 в 16:12

Вы пробовали object-fit: cover; ? Или, если вы можете, вы можете предоставить нам чистый код html и css, чтобы мы могли увидеть все потенциальные элементы, которые вызывают эту проблему.

–

Mirza C

30 Окт 2019 в 11:05

Как остановить растяжение изображения внутри div?

1 ответ

Похожие вопросы

Новые вопросы

javascript