скрыть часть изображения с помощью css

Question

В отзывчивом дизайне я хочу скрыть часть изображения с помощью CSS для широких экранов, но у вас есть все изображение, чтобы я мог изменять пропорции изображения с помощью мультимедийного запроса для отображения все изображение для маленьких экранов. Я установил образец того, что я хотел с простой страницей, но он не работает - все изображение всегда отображается. Образец страницы http://longinsurance.biz/temp.html; цель состоит в том, чтобы отобразить 82% изображения.

Может кто-нибудь предположить, что я сделал неправильно или как заставить его работать?

Спасибо!

Answer 1

Если вы хотите скрыть части изображения, вот что делать.

контейнер изображения CSS

.image-container { 
width: 80%; /* Chosen width */ 
height: 80%; /* Chosen height */ 
overflow: hidden; /* Cuts off whatever goes beyond the container */ 
} 

Изображение CSS

.image-container img { 
width: 100%; /* Fits the given width of the image container */ 
height: auto; /* Reduces deterioration because the height isn't forced */ 
margin: -5px -5px -5px -5px; /* The minus cuts off(hides) parts of the image */ 
} 

Для запроса СМИ: Используйте тот же CSS и настроить размеры по мере необходимости.

Примечание: Чем выше минус номер, тем больше он отсекает.