画像をレスポンシブ状態にしたい（background-sizeは使えない）

Question

質問を変更

レスポンシブにはなっていました。すみません...。
ただ、PC版を元に作成しているため、スマホサイズにした際、
かなり画像が小さくなってしまいます。

やりたいこと

画面が小さくなるに従って、画像もアップされるようにしたいです。
どうすれば良いでしょうか？

<a href="https://example.com" target="_blank" class="plugin">
  <div class="top">
    <img src="images/example.png" class="img">
  </div>
  <div class="bottom">
    <img src="http://cdn.ikyu.com/dg/image/icon/plus.png" class="mark">
    <h3 class="name">サンプルテキスト</h3>
    <p class="area">サンプルテキスト</p>
    <button class="button">サンプルテキスト</button>
  </div>
</a>

JS側で動的にDOM構造を作成していたり、諸事情からbackground-sizeはどうしても使えません。
その他にレスポンシブにする良い方法はないでしょうか？

Comments

[kei344]

「諸事情」を具体的にお願いします。使用する環境がIE8とかであれば使える方法が変わります。

Answer 1

メディアクエリを使いましょう

ex.)

.img{
width: 100%;
}
.mark{
width: 100%; 
}
@media screen and (min-width:480px) { 
/* 480px 以上の場合 */
.img{
width: 80%;
}
.mark{
width: 80%; 
}
}
@media screen and (min-width:768px) {
/* 768px 以上の場合 */
.img{
width: 500px;
}
.mark{
width: 500px; 
}
}

参考URL

Answer 2

以下で出来る気がします。
1.imgをDivなどでラップする（現状であれば .top , .bottom でラップされてるのでその前提）
2.CSSでimgのwidthを100%にする。（必要であればheightも）
3.ラップしている.top および .bottom にメディアクエリでブレークポイントごとに設定したいwidth,heightを設定。必要であれば、min-width,min-heightおよびmax-width,max-heightを設定。
なお、アスペクト比はラップしている .top および .bottomで調整。

Comments

[kanimaru]

1点確認です。スマホ用に以下のようなViewport設定はなされているのでしょうか。
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no, shrink-to-fit=no">