Адаптивный сайт; поддержание высоты изображения при уменьшении ширины?
Это сайт, над которым я работаю: http://www.cmattayers.com/moushegianlaw/
Я пытаюсь заставить основной слайдер изображения (фотографию молотка) реагировать, но при этом сохранять ту же высоту. Прямо сейчас у меня есть это так, чтобы размеры изображения были сжаты, используя:
#headerslider img{
height:227px;
width:100%;
}
Но я хочу сохранить целостность изображения и сдвинуть его влево (вне поля зрения, как если бы оно было в «рамке»), так как размер окна браузера становится уже. Я не знаю, как этого добиться или возможно ли это вообще. Работает ли чисто CSS-решение?
Решение
Вы можете использовать фоновое изображение на вашем #headerslider как следующее и удалите тег изображения.
#headerslider {
background: url('http://www.cmattayers.com/moushegianlaw/wp-content/uploads/2015/06/gavel-header_wide.jpg') no-repeat center right;
height: 227px;
}
Единственная проблема, с которой вы можете столкнуться, это то, что ваше поле выноски не установлено на той же высоте, в данный момент оно просто подходит довольно хорошо, но если бы этот текст сократился, высота окна выноски была бы не такой высокой. Вы можете установить высоту #callout до 227 пикселей, пока вы в безопасности.
Другие решения
Других решений пока нет …