Как остановить автоматическое изменение размера изображения при расширении окна

Question

У меня возникла проблема с моим сайтом http://www.tom-phelps.com/work Я только что заметил, что при использовании большого монитора верхнее левое изображение изменяет размеры и перекрывает другое содержимое в качестве экрана становится шире, хотя нижнее изображение не работает, и оба они используют одни и те же настройки CSS и HTML, и я попытался настроить размер первого. Оба являются .JPEGs, может ли кто-нибудь помочь мне с этим? благодаря

--Image, которая изменяет

в том:

.work1{ 
width: 100%; 
min-width: 768px; 
min-height:440px; 


} 

.image1{ 
width:35%; 
float:left; 
height:100%; 
min-height:440px; 
background-image:url(phelpsroofing2.jpg); 
background-repeat:no-repeat; 
margin-top:20px; 
} 

--Image что остается same--

.work2{ 
width: 100%; 
min-width: 768px; 
min-height:440px; 
background-color:#cccccc; 
} 

.image2{ 
width:35%; 
float:right; 
height:100%; 
min-height:440px; 
background-image:url(ipad2.jpg); 
background-repeat:no-repeat; 
margin-top:20px; 

} 

Answer 1

Что бы вы хотели, чтобы случиться именно? Изображение со 100-процентной шириной будет масштабироваться, что означает, что высота также будет регулироваться в зависимости от того, насколько широка изображение.

Если вы хотите, чтобы изображение масштабировалось, но закрывайте его, придайте ему максимальную ширину. Если вы хотите, чтобы он масштабировался, но не перекрывал содержимое ниже, дайте контейнеру (который является .work1) переполнение: hidden;