Как остановить растягивание ширины изображения внутри 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

Answer

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

Question 2

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

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

1 ответ

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

javascript