css 响应的iframe和地图只有CSS

Posted 2021-05-13

/* Responsive iFrame */
 
.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.responsive-iframe-container iframe,  
.vresponsive-iframe-container object, 
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*And then wrap your Google Map or Google Calendar iframe in a div like this:*/
/*<div class="responsive-iframe-container">
    <... iframe code >
</div>*/