Question

好的，我们走了： http://judao.com.br/direto-do-epicentro-de-terremoto-a-falha-de-san-andreas/

内容图片很大，100％宽，带有标题。但是1080p分辨率。下面的任何内容都可以剪切图像，标题和视频。

div在另一个内部，即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看起来很相似，但是这里出现了魔法 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

好的，伙计们，我解决了。我从未听说过VW的事情......当我这样做时，它起作用了。这是最终的解决方案。：）

#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！：））））

为什么DIV和图像没有调整大小，而是被剪切？

2 个答案: