подходит для изображения внутри div без резки

У меня проблема с изображениями и их контейнером div элемент. Мои изображения меньше, чем div контейнера, и когда я пытаюсь поместить их, изображения вырезаются в нижней части. Как я могу это исправить?подходит для изображения внутри div без резки

Я просмотрел веб-страницы и нашел много решений, но я не смог применить их к своей работе. Вы можете мне помочь?

вот мой код:

CSS:

#box_foto_1{ 
    clear: both; 
    float: left; 
    width: 400px; 
    height: 262px; 
    border: 1px solid; 
    margin-left: 100px; 
    margin-top: 20px; 
    overflow: hidden; 
} 


#box_foto_1 img{ 
    height: auto; 
    width: 100%; 
}

здесь HTML/PHP:

$html .= "<div id='box_foto_1'>"; 
$html .= "<img src='$row[foto1]' >"; 
$html .= "</div> <!-- fine box_foto_1 -->";

код HTML/PHP является частью функции PHP для создания страницы ,

источник

2016-01-31 P.Davide

, пожалуйста, измените свой css, как я, посмотрите, работает ли эта работа # box_foto_1 img { высота: авто; ширина: авто; } –

спасибо за ответ, он не изменился, он по-прежнему как и раньше –

Ну, вам нужны изображения с одинаковой шириной div с id box_foto_1, правильно? –

Если вы хотите, чтобы изображение по размеру окна и отображения всего изображения:

Все, что вам нужно сделать, это удалить ваш #box_foto_1 высота height:262px значение или установить это как min-height или max-height зависимости от того, подходит для вас ,

Если вы хотите, чтобы изображение, содержащееся в пределах установленного размера коробки:

Удалите максимизаторами/мин- значения (в моем Теперь удаляемого предыдущий ответ) в CSS для размера коробки и затем установите ширину и высота до auto значения на #box_foto_1 img. Как так:

#box_foto_1 { 
     /* added or changed rules */ 
     display:block; 
    } 
    #box_foto_1{ 
     clear: both; /* Clear before float is probably useless */ 
     float: left; 
     width: 400px; 
     height: 262px; 
     border: 1px solid; 
     margin-left: 100px; 
     margin-top: 20px; 
     overflow: hidden; 
    } 

    #box_foto_1 img{ 
     height: 100%; 
     width: 100%; 
    }

Установка обоих значений на 100% будет растягивать изображение, вам нужно установить один как авто, такие как height:auto;, которая будет вызывать переполнение ширины.

https://jsfiddle.net/bvkurufq/3/

Лучший способ решения этого вообще установить значение изображения как CSS фоновое изображение, а затем вы свободны для гораздо больше CSS манипуляции его. Вы можете это сделать, указав изображение в строке style в верхней части вашего <body>, заполненного ссылками SRC базы данных.

Пример: PHP/HTML выход:

<?php 
/*within the PHP image loop */ 
{ 
<style> 
    #imageUniqueId { 
    background-image:url('<?php print $imageURL;?>'); 
    } 
</style> 
<div id='box_foto_1'> 
<div id='imageUniqueId' class='imageClass'></div> 
</div> <!-- fine box_foto_1 --> 

<?php 
} 
?>

CSS:

#box_foto_1{ 
    min-width: 400px; 
    min-height: 262px; 
    float: left; 
    border: 1px solid; 
    margin-left: 100px; 
    margin-top: 20px; 
    overflow: hidden; 
}

.imageClass { дисплей: блок; min-width: 400px; min-height: 262px; background-repeat: no-repeat; background-position: center; background-size: содержать; }

См https://jsfiddle.net/bvkurufq/33/

источник

2016-01-31 13:54:10 Martin

действительно, нижняя часть изображения скрыта, и это нижняя часть, которую мне не хватает на изображении, также с вашим решением .. на данный момент я думаю, что есть нет решения для изображения, которое должно соответствовать (высококлассному) внутри div. –

@ P.Davide Я сейчас сильно обновил свой андерсер. – Martin

@ P.Davide решение при использовании '' и CSS состоит в том, что для одного или обоих свойств 'width' /' height' должно быть задано заданное значение, например '100%', а другое - auto (унаследованное) значение от самого объекта изображения. – Martin

Я ответ с мобильного телефона, так что я не могу дать вам конкретный код, но, если я получил плотный свой вопрос, лучший способ для обработки вашего размера изображения PHP.

Вы можете сделать так:

1) Удалить # box_foto_1 IMG с вашего CSS

2) Добавить некоторые, если/еще до вашего PHP

$html .= '<div ....'; 
    $div_height = 256; 
    $div_width = 500; 

    // now get your image dimensions and check whitch one is bigger 

    ...... 

list($img_w, $img_h) = getimagesize($your_image); 


    if($img_h>$img_w) { 
     $html .= '<img src="' . $your_image . ' style="height: ' . $div_height .'px; width="auto" />'; 

    } else { 
    $html .= '<img src="image.jpg" style="width: ' . $div_width .'px; height="auto" />'; 
    } 

    $html .= '</div>';

Поиск, как получить размеры изображения с php ... не может помочь вам с этим сейчас ... потому что я на телефоне.

Вы можете найти здесь, как получить размер изображения:

http://php.net/manual/ro/function.getimagesize.php

Обновление: Я добавил функцию getimagesize.

источник

2016-01-31 14:19:35 catalin87

Я просто попытался это в fiddle предоставленной Martin, так что вы можете попробовать что-то вроде этого, чтобы содержать изображение внутри DIV без кадрирования или искажая пропорции:

Просто добавьте это в ваш класс изображения:

#box_foto_1 img{ 
     max-width: 100%; 
     object-fit: contain; 
     height: 100%; 
     }

Если вы хотите, чтобы изображение соответствовало размеру вашего div, в этом случае вам нужно указать те же размеры, что и ваш блок, но это исказит пропорцию.

или заменить object-fit:contain на object-fit:fill.

источник

2016-01-31 14:49:57

'Object-fit' выглядит как замечательный бит CSS, я никогда не знал об этом. – Martin

Yup, это. :). Более простой способ обработки изображений без искажения отношения изображения. –

Хотя это почти полностью не известно IE, а также проблемы сафари. Мне очень нравится, как переменный браузер обрабатывается, а объявления правил - для веб-дизайна. : -/http://caniuse.com/#search=object-fit – Martin

подходит для изображения внутри div без резки

ответ

Смежные вопросы