Отрегулируйте ширину изображения, но сохраните ту же высоту

Извините, если это уже было задано, но я не был уверен в правильной формулировке, поэтому я не смог ее найти. У меня есть изображение, которое очень велико по ширине, и я хочу, чтобы он уходил из окна браузера при использовании меньшего разрешения, и если у вас есть большее разрешение, он будет показывать больше изображения (ширина только ТОЛЬКО, высота должен оставаться тем же), таким образом, не имеет значения, какое разрешение вы просматриваете, изображение будет по-прежнему одинаковой высоты, поэтому содержание страницы останется в основном тем же. Просто вставляя его с помощью тегов img, вы настраиваете все изображение в соответствии с окном браузера, изменяя высоту в процессе. Ниже приведена очень грубая диаграмма того, что я хочу.Отрегулируйте ширину изображения, но сохраните ту же высоту

Image Diagram

источник

2013-06-16 Anonymous

Просто издевались что-то. Это хорошо для вас? http://jsfiddle.net/T7tEM/ – adaam

@adaam Похоже, что я хочу, я собираюсь настроить его на свой сайт и вернуться к вам. –

Это решение не поддерживает аспектный рацион. Неужели ты хочешь этого? Проверьте мой ответ, прост и выполняйте эту работу. http://jsfiddle.net/SVxJ4/1/ –

использовать этот код:

УС:

.container { 
    width:100%; 
    height:100%; 
    position:fixed !important; 
    top:0; 
    left:0; 
    background-color:red; 
    right:0; 
    bottom:0; 
} 
.container img { 
    height:inherit; 
    width:100%; 
}

Контейнер fixed и это ширина и высота 100% с его сверху, слева, справа, нижние значения все готово до нулевых пикселей. Img в контейнере наследует высоту, установленную в контейнерном блоке, но ширина составляет 100%. HTML:

<div class="container"> 
    <img src="http://placehold.it/1024X768">  
</div>

JsFiddle:

http://jsfiddle.net/CVNf9/

источник

2013-06-16 00:27:51 adaam

В настоящее время у меня мало времени, поэтому я, возможно, сделал что-то не так, но я не мог заставить его работать. Я работаю на этом сайте: http://soto.novicode.com/. Основная картина должна оставаться на определенной высоте, но чтобы сохранить правильное соотношение, я хочу, чтобы она могла уйти с страницы (как на моей диаграмме). Сейчас он просто регулирует высоту, чтобы ширина соответствовала сторонам браузера. –

@Novicode Затем просто установите свойство img 'width' в фиксированную ширину, то есть' width: 1000px; ', а не в процентах. Обновлена скрипка: http://jsfiddle.net/CVNf9/2/ – adaam

-1

Как все просто:

img { 
    width: 1000px; /* Width of your img */ 
    height: 600px; /* Height of your img */ 
}

И чтобы избежать горизонтальной полосы прокрутки, завернуть изображение с некоторым элементом и установить его переполнение атрибут скрыт, ширина до 100%

JSFiddle
http://jsfiddle.net/SVxJ4/1/

источник

2013-06-16 00:31:54

Простой вариант заключается в добавлении overflow: hidden; в контейнер изображения. Например. http://codepen.io/pageaffairs/pen/Etikh

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

.wrap {width: 60%; margin: 0 auto; background: ##e7e7e7; padding: 20px;} 
.container {overflow: hidden;} 

</style> 
</head> 
<body> 
<div class="wrap"> 
    <div class="container"> 
     <img src="http://placehold.it/1024X600" alt=""> 
    </div> 
</div> 

</body> 
</html>

источник

2013-06-16 00:36:02

Я думаю, что это то, что вы ищете:

.image-mask { 
    margin: 10px; 
    border: dotted 2px red; 
    overflow: hidden; 
} 
.image-mask img { 
    display: block; 
    width:1024px; 
    height:768px; 
} 

<div class="image-mask"> 
    <img src="http://yourdomain.com/images/yourimage.png"> 
</div>

В случае необходимости установить максимальные ширины на .image-маске (например, если он имеет фактическую границу вы хотите отобразить или что-то), чтобы предотвратить его становится больше ширины изображения, или установить margin: 0 auto его в центр и т.д.

скрипку: http://jsfiddle.net/Aj59Z/2/

источник

2013-06-16 00:40:29 Skrivener

Отрегулируйте ширину изображения, но сохраните ту же высоту

ответ

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