2
私はこの小さなコードを持っています（それの抜粋）。問題は、メディアクエリを使用していても、画像が画面に合わないことです。誰も私にこの問題を解決する方法を教えてもらえますか？私が使用している画像は画面よりも大きいので、画面上を行き来すると、人々は水平にスクロールしなければなりません。画面は自動的に画面に収まるはずです。ここで レスポンシブなイメージはモバイル画面に適合しません
は私のコードです：.portfolio img {
max-width: 100%;
width: 100%;
height: auto !important;
}
@media only screen and (min-width: 1025px)
{
\t #myBackground
\t {
\t \t min-height: 1000px;
\t }
\t
\t #produkter
\t {
\t \t min-height: 1000px;
\t }
\t .portfolio img {
max-width: 440px;
max-height: 440px;
}
\t
}
@media only screen and (max-width: 1024px)
{
\t #myBackground
\t {
\t \t min-height: 800px;
\t }
\t
\t #produkter
\t {
\t \t min-height: 800px;
\t }
\t .portfolio img {
max-width: 300px;
max-height: 300px;
}
\t
\t
}
@media only screen and (max-width: 640px)
{
\t #myBackground
\t {
\t \t min-height: 600px;
\t }
\t
\t #produkter
\t {
\t \t min-height: 600px;
\t }
\t .portfolio img {
max-width: 240px;
max-height: 240px;
}
\t
\t
}
@media only screen and (max-width: 368px)
{
\t #myBackground
\t {
\t \t min-height: 500px;
\t }
\t
\t #produkter
\t {
\t \t min-height: 500px;
\t }
\t .portfolio img {
max-width: 100px;
max-height: 100px;
}
\t
\t
}<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<img class="portfolio" src="images/bock1.png"/>
</body>
もちろん、それは素晴らしい作品です - ありがとう！ –