为什么DIV和图像不是调整大小，而是被切割？

Question

好了，所以在这里我们去： http://judao.com.br/direto-do-epicentro-de-terremoto-a-falha-de-san-andreas/

内容图像是巨大的，100％的宽度，用的标题。但在1080p分辨率。下面的任何内容都会削减图像，标题和视频。

divs在另一个里面，它说max-width：960px。这是我做了很多事情。

#tamanhao { 
display: inline-block; 
left: -50%; 
outline: 0; 
overflow: hidden; 
position: relative; 
text-align: center; 
height: auto !important; 
width: 200%; 
} 

#tamanhao img { 
max-width: 100% !important; 
padding-top: 32px !important; 
height: auto !important; 
} 

.caption { 
float: left; 
display: inline; 
margin-top: -16px; 
font-size: 14px; 
color: #888; 
padding-left: 32px !important; 
max-width: 470px; 
font-style: italic; 
font-family: exo; 
text-align: left !important; 
line-height: 14px !important; 
} 

#videozao { 
display: block; 
left: -50%; 
outline: 0; 
overflow: hidden; 
position: relative; 
text-align: center; 
width: 200%; 
max-height: 744px !important; 

} 

#videozao iframe { 
margin: 0 auto; 
display: block; 
width: 1280px !important; 
height: 720px !important; 
position: relative; 
} 

我在做什么错？我怎样才能做到这一点？

Answer 1

这是因为您的内容使用的是静态宽度，这意味着您使用的是px而不是percentage。在调整窗口大小的同时，百分比会使您的内容在屏幕较小的屏幕上响应，而例如500px将始终保持相同的值，除非您使用媒体查询。 Here's a example，调整窗口的图像在这个链接上看到它的工作。

代码说明

<div class="responsiveWidth"> 
    ...Conteúdo Responsivo... 
    <img src="http://i1.wp.com/www.24x7photography.com/wp-content/uploads/2010/08/random2.jpg?w=720" width="500"> 
</div> 

<div class="staticWidth"> 
    ...Conteúdo Estático... 
    <img src="http://i1.wp.com/www.24x7photography.com/wp-content/uploads/2010/08/random2.jpg?w=720" width="500"> 
</div> 

这2个div的看起来exaclty相同，但这里的神奇在哪里发生
CSS

.staticWidth { 
    width:500px; 
    margin:10px; 
    border:1px solid #000; 
} 
.responsiveWidth { 
    width:100%; /* This says the div to stay always 100% of it's parent, in this case it's `body` because we don't have any div container */ 
    margin:10px; 
    border:1px solid #000; 
} 
.responsiveWidth img{ 
    width:100%; /* This will make the width of the image 100% as well, the height it's automattic because we didn't set one nor on HTML or CSS */ 
} 

Answer 2

好吧，伙计们，我解决了这个问题。我从来没有听说过大众的事情......当我这样做，它的工作。这是最终的解决方案。 :)

#tamanhao { 
    position: relative; 
    left: 50%; 
    height: auto !important; 
    margin: 0px 0 0 -50vw; 
    width: 100vw; 
} 

#tamanhao img { 
    max-width: 100vw !important; 
    padding-top: 32px !important; 
    height: auto !important; 
} 

#videozao { 
position: relative; 
left: 50%; 
max-height: 720px !important; 
margin: 0px 0 0 -50vw; 
width: 100vw; 
} 

#videozao .fve-video-wrapper { 
margin-left: auto; 
margin-right: auto; 
max-width: 1280px !important; 
max-height: 720px !important; 
} 

#videozao iframe { 
max-width: 1280px !important; 
max-height: 720px !important; 
} 

谢谢/ Obrigado！ :)）））