DIV要素で囲んでclass属性をつけるだけ

/* 正方形*/
.square{
  height: auto;
  position: relative;
  padding:0;
  width:100%;
}
.square:before{
  content: "";
  display: block;
  padding-top: 100%;
}
.square>*{
  position:absolute;
  display:block;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

/* 長方形 */
.rectangle_4vs3{
  height: auto;
  position: relative;
  padding:0;
}
.rectangle_4vs3:before{
  content: "";
  display: block;
  padding-top: 75%;
}
.rectangle_4vs3>*{
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  bottom:0;
}
.rectangle_16vs9{
  height: auto;
  position: relative;
  padding:0;
}
.rectangle_16vs9:before{
  content: "";
  display: block;
  padding-top: 56.25%;
}
.rectangle_16vs9>*{
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  bottom:0;
}
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.