Как установить max-height:270px и height:auto одновременно, так что если содержимое (изображение) слишком велико, оно должно сократить его размеры и поставить его под 270px , иначе это должно быть высота auto.CSS, применяющий свойство максимальной высоты и автовысоты одновременно для изображения
Я пробовал с overflow-Y, но я не хочу полосу прокрутки, только мини-версию рисунка. Как я могу это сделать?
измененный код :: TRY IT
img{
height:100%;
max-height:270px;
}
переполнение скрытых разрезов изображения. Он не показывает полное изображение. Я хочу, чтобы большое изображение автоматически сокращало размеры. В настоящее время с высотой: 270 пикселей большие изображения сокращаются должным образом, но div с маленькими изображениями или текстовым контентом также имеет ту же высоту 270 пикселей, тем самым теряя пространство. Я хочу что-то вроде авто. – PythonEnthusiast
Такая же проблема с обновленным кодом. – PythonEnthusiast
Вы пробовали это ???? это не предполагается, чтобы вырезать/обрезать изображение. Я использовал 'overflow: hidden;' в wrapper div ... и я поставил ограничение на максимальную высоту и ширину для этого изображения ... это означает, что фотография будет изменена, если она пересечет предел ... нет возможности для обрезки ... 'overflow: hidden;' в обертке div используется здесь, просто покрывает всю область, занимаемую этим изображением –
Использование так:
height: 0; /*rather than auto*/
max-height: 270px;
Naa. Все переполняется. Изображение выводит вкладку div и накладывается на другие div. Даже div с текстовым контентом также переполняется. – PythonEnthusiast
Вы пробовали что-то 0px или 0%? –
С обоими px и%, изображение переполняет ограничение по размеру – PythonEnthusiast
использовать как этого
height:auto;
max-height: 270;
Overflow:hidden;
макс высоту будет ограничивать вашу высоту изображения в этот пикс, если высота изображения выше, чем это. , задающий любую конкретную высоту, будет масштабировать изображение, если высота будет меньше высоты изображения. Скрытое переполнение скрывает полосу прокрутки.
переполнение скрытых разрезов изображения.Он не показывает полное изображение. Я хочу, чтобы большое изображение автоматически сокращало размеры. В настоящее время с 'height: 270px' большие изображения сокращаются должным образом, но div с маленькими изображениями или текстовым контентом также имеет ту же высоту 270px, тем самым теряя пространство. Я хочу что-то вроде 'auto'. – PythonEnthusiast
не применяйте ширину в теге изображения. установить CSS для max-width:100%; max-height:100%;
Кроме того, прочитайте эту http://unstoppablerobotninja.com/entry/fluid-images
Вы бы просто сделать это:
<img style="max-height:270px" src="500x500.png" alt="I am resized to 270x270">
<img style="max-height:270px" src="200x200.png" alt="I am not resized">
К не установив высота/ширина позволяет браузеру отображать изображение в его собственном размере до предела, установленного через max-height.
В то время как h/w не является лучшей практикой, он легко выполняет то, что вы пытаетесь сделать, и займет всего несколько секунд дольше, чтобы загрузить страницу, так как браузер должен вычислить каждый размер изображения перед отображением Это.
Пример: jsFiddle
Насколько я понимаю, у вас есть 2 кода одну работу для Google Chrome, а другой для всех остальных браузеров, как объединить их (если вы не можете изменить свой код Alittle немного, чтобы удовлетворить ваши потребности.) Вы могли бы попробовать что-то вроде этого:
<?PHP if($browser == "Chrome"){ ?>
<!--HTML Code for Chrome browser-->
<?PHP }else { ?>
<!--Code for other browsers-->
<?PHP } ?>
Это помогло бы для кросс-браузеров сценариев
не понимают это правильно. Таким образом, у вас есть изображение с абсолютной высотой 500 пикселей. Но изображение должно иметь максимальную высоту 270 пикселей. Но что вы хотите с высотой: auto? –
С автоматическим я хочу, чтобы, если изображение имеет размер, скажем, 100 пикселей, высота div должна автоматически устанавливаться на 100 пикселей, но в худшем случае, как и в 500 пикселей, он не должен превышать 270 пикселей. – PythonEnthusiast
Не 'max-height: 270px' один отвечает вашим потребностям? – nubinub