0
イメージをセンタリングしてデバイスの画面に合わせようとしています。これまでのところ、携帯電話では縦向きなので完全に正常に動作していますが、画像全体を見るにはスクロールする必要があります。ここで イメージを中心にしてウェブサイト上の画面に合わせる（非常に簡単）
は、画像と私のサイトです Click HereHTMLコード
<!DOCTYPE html>
<html>
<head>
<title>Outdoor Photography</title>
<link rel="icon" href="site-icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="Grant Birkinbine, Birki, Grant, Photography, Outdoors" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
</head>
<body>
<img src="/images/The-Canyon.jpg">
</body>
</html>
CSS
@media screen and (max-width: 320px) {
/* Smaller Devices */
img{
width: cover;
max-width: 100%;
height: cover;
}
}
@media screen and (min-width: 374px) and (max-width: 376px) {
/* iPhone 6 */
img{
width: cover;
max-width: 100%;
height: cover;
}
}
@media screen and (min-width: 319px) and (max-width: 321px) {
/* iPhone 5 */
img{
width: cover;
max-width: 100%;
height: cover;
}
}
@media screen and (min-width: 359px) and (max-width: 361px) {
/* Galaxy S7 */
img{
width: cover;
max-width: 100%;
height: cover;
}
}
@media screen and (min-width: 481px) {
/* Desktops */
img {
width: cover ;
max-width: 100% ;
height: cover ;
}
.resize {
width: 1024px; /* 1024 */
height: auto; /* 682 */
}
.container {
margin: 0 auto;
width: 1260px;
height: 1365px;
line-height: 115px;
text-align: center;
border: 0px solid red;
}
}
body {
background-color: gainsboro;
}
私はそれが正確にどのようにコピーして、あなたのコードを貼り付け、私の画面だけでは唯一のコマンドかのように灰色になっバックグラウンドカラーが実行されました。私はこの情報をコピーして貼り付けるよりも何かが必要ですか？ – Birki
@Birki、それはそれでなければならない。貼り付けた場所を上にチェックしてください。閉じたタグはありません。また、これらは2つの別々のソリューションであるため、どちらか一方であり、両方ではありません。 –