图片百分比 html,HTML5 使用百分比定位背景图片

CSS

语言：

CSSSCSS

确定

@charset "UTF-8";

*,

*:before,

*:after {

box-sizing: border-box;

}

body {

font-family: 'Roboto', sans-serif;

background-color: #eee;

}

.wrap {

margin-left: auto;

margin-right: auto;

max-width: 33rem;

background-color: #fff;

padding: 1.5rem;

}

.container {

height: 0;

padding-top: 100%;

background-color: #a1b2c3;

position: relative;

-webkit-transition: all ease-in-out 0.2s;

transition: all ease-in-out 0.2s;

}

.inner {

border: 1px solid #333;

position: absolute;

left: 1.5rem;

top: 1.5rem;

right: 1.5rem;

bottom: 1.5rem;

}

.heading {

margin: 0;

padding: 0;

font-weight: normal;

font-size: 1.3rem;

line-height: 1.5em;

margin-bottom: 0.75rem;

}

.has-bg-image {

background-repeat: no-repeat;

background-image: url("http://lorempixel.com/g/480/480/");

}

.controls {

margin-top: 0.75rem;

color: #666;

}

.ctr-label,

.ctr-slider,

.ctr-info {

display: block;

width: 100%;

}

.ctr-label small {

display: none;

}

.ctr-info {

text-align: right;

}

@media (min-width: 35em) {

.ctr-label,

.ctr-slider,

.ctr-info {

display: inline-block;

vertical-align: middle;

}

.ctr-label {

width: 35%;

}

.ctr-label small {

display: inline;

}

.ctr-slider {

width: 50%;

}

.ctr-info {

width: 10%;

}

}