картинка, встроенная в перекрытие div

У меня проблема с картиной, выходящей из ее контейнера.картинка, встроенная в перекрытие div

<div id="home" class="cadre">  

<div id="photo"> 
    <img style="height:80%;float:right;max-height:250px;" src="images/photo.jpg"/> 
</div> 

<div style="width:70%;"> 

Some text 
</div> 
</div>

А вот соответствующее содержание CSS стилей:

img{ 
max-width:100%; 
max-height:100%; 
} 

#photo{ 
    float: right; 
    max-width:45%; 
    height:90%; 
    margin: 0 auto; 
    } 

.cadre { 
color: black; 
border-width: 0; 
border-radius: 10px; 
margin: 40px auto; 
padding: 20px; 
width: 95%; 
background-color: rgba(200,200,200,.2); 
box-shadow: 0px 1px 8px 0px rgba(0,0,0,.4) inset; 
}

Я новичок в CSS, так что я, вероятно, сделал дизайн ошибки, но все-таки я не понимаю, как это возможно, что изображения выходят из кадра.

Он также зависит от ОС/проводника, поскольку он отлично работает на Windows/Chrome, но не на Linux/Firefox.

источник

2014-09-17 D K

добавить 'переполнения: hidden' в' # photo' –

будет не так просто скрыть переполнение вместо уменьшения фотографии до соответствующего размера? –

, не связанный с вопросом: вы можете избежать нечетных правил, таких как 'width: 45%' и 'width: 95%', если вы используете 'box-sizing: border-box'. теперь вы можете использовать '50%' и '100%', как вы планируете. –

Попробуйте решить ваш родитель ребенку ширина проблема:

<div class="wrapper"> 
    <div class="inner"> 
     <div id="pic"> 
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6xO92YTljrxvGfxHRnZ_F-jjYGQvfRST-18K3cJhJYPNfBlLTdg"/> 
     </div> 
     <div id="text"> 
      some text 
      <br/><br/><br/><br/><br/><br/><br/> 
      other text 
     </div> 
     </div> 
</div>

И CSS:

.wrapper { 
    max-height: auto; 
    background: red; 
    display: table; 
} 
.inner { 
    display: table-row; 
} 
#pic { 
    float: right; 
    height: 180px; 
    max-height: 100% 
} 
#text { 
    width:70%; 
}

источник

2014-09-17 14:35:50 Dino

Спасибо, но проблема в том, что я не хочу указывать размер для img, я хочу, чтобы он соответствовал размеру текста. –

Кажется, сейчас работает, я не все понял, но спасибо! –

Вам нужно определить родительский div, где фотография встроена таким образом, что она не позволяет любому элементу «за бортом».

#photo { overflow: hidden; }

#photo img { max-width: 100%; max-height: 100%; }

Если сделать трюк в вашей ситуации.

источник

2014-09-17 12:15:27 Dino

это ничего не меняет:/ –

, и если я добавлю это в #home вместо #photo, то div станет огромным! –

проблема здесь, кажется, в том, что «фото» переполняет «домашний» –

картинка, встроенная в перекрытие div

ответ

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