写真


レスポンシブ Web デザイン - 写真

幅属性の使用

幅属性が 100% に設定されている場合、画像は上限と下限の範囲に従ってレスポンシブ機能を実装します:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
img {
    width: 100%;
    height: auto;
}
</style>
</head>
<body>

<img src="https://img.php.cn/upload/article/000/000/024/5c668566136f4479.jpg" width="460" height="345">
<p>调整浏览器窗口查看图像是如何扩展的。</p>

</body>
</html>

インスタンスの実行»

「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します

上記の例では、画像が元の画像よりも大きくなることに注意してください。 max-width 属性を使用すると、この問題をうまく解決できます。

max-width 属性を使用します

max-width 属性が 100% に設定されている場合、画像は元のサイズより大きくなることはありません:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>
</head>
<body>

<img src="https://img.php.cn/upload/article/000/000/024/5c668566136f4479.jpg" width="460" height="345">
<p>调整浏览器大小，在宽度小于 460px 时查看图片比例变化。</p>

</body>
</html>

インスタンスを実行»

クリック[インスタンスの実行] ボタン オンライン インスタンスを表示します

Web ページに写真を追加します

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
* {
    box-sizing: border-box;
}
img {
    width: 100%;
    height: auto;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}
@media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="col-6 col-s-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<img src="https://img.php.cn/upload/article/000/000/024/5c668566136f4479.jpg" width="460" height="345">
</div>

<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>

</div>

<div class="footer">
<p>调整浏览器窗口大小查看内容变化。</p>
</div>

</body>
</html>

インスタンスを実行しますか?

オンライン インスタンスを表示するには、[インスタンスを実行] ボタンをクリックします

背景画像

背景画像は、ズームに応じてサイズを変更したり、サイズを変更したりできます。

以下は 3 つの異なる方法です:

1. 背景サイズ プロパティが「contain」に設定されている場合、背景画像はコンテンツ領域に比例して調整されます。画像はその比率を維持します:


これは CSS コードです:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
div {
    width: 100%;
    height: 400px;
    background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}
</style>
</head>
<body>

<p>调整浏览器大小查看效果。</p>

<div></div>

</body>
</html>

インスタンスの実行»

オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

2。背景の場合 - サイズ属性が「100% 100%」に設定されており、背景画像が領域全体をカバーするように拡張されます:


インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
div {
    width: 100%;
    height: 400px;
    background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}
</style>
</head>
<body>

<p>调整浏览器大小查看效果。</p>

<div></div>

</body>
</html>

インスタンスを実行する»

「インスタンス」ボタンをクリックしてオンラインインスタンスを表示します

3. 背景サイズプロパティが「カバー」に設定されている場合、背景画像は背景領域を完全に覆うのに十分な大きさに拡大されます。このプロパティは画像の比率を維持することに注意してください。 背景アンカーエリアには、背景画像の一部が表示されません。


これはCSSコードです:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
div {
    width: 100%;
    height: 400px;
    background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg');
    background-size: cover;
    border: 1px solid red;
}
</style>
</head>
<body>

<p>调整浏览器大小查看效果。</p>

<div></div>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください

デバイスが異なると表示される画像も異なります

大サイズの画像は表示できます。大きな画面では動作しますが、小さな画面ではうまく表示されません。読み込み速度に影響するため、小さな画面に大きな画像を読み込む必要はありません。したがって、メディア クエリを使用して、さまざまなデバイスに基づいてさまざまな画像を表示できます。

次の大小の画像がさまざまなデバイスに表示されます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
/* For width smaller than 400px: */
body {
    background-repeat: no-repeat;
    background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body { 
       background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg'); 
    }
}
</style>
</head>
<body>

<p style="margin-top:360px;">调整浏览器宽度，背景图片在小于 400 px 时将改变。</p>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください

メディアを使用できます。 クエリの min-device-width は min-width 属性を置き換えます。これにより、ブラウザの幅ではなくデバイスの幅が検出されます。ブラウザのサイズを変更しても画像サイズは変わりません。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
<style>
/* For device width smaller than 400px: */
body {
    background-repeat: no-repeat;
    background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg'); 
}

/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
    body { 
       background-image: url('https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg'); 
    }
}
</style>
</head>
<body>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

HTML5 <画像> 元素

HTML5 の <picture> 元素は複数の画像を配置できます。 <picture> 元素可以设置多张图片。

浏览器支持

函数1546322463316818.gif1546322467179911.gif3.gif4.gif5.gif
:visited不支持38.038.0不支持25.0

<picture> 元素类似于 <video> 和<audio> 元素。可以设备不同的资源，第一个设置的资源为首选使用的：

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php 中文网</title> 
</head>
<body>

<picture>
    <source srcset="https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg" media="(max-width: 400px)">
    <source srcset="https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg">
    <img src="https://img.php.cn/upload/article/000/000/024/5c66874932cfb699.jpg" alt="Flowers" style="width:auto;">
</picture>

<p>调整浏览器宽度和高度，背景在宽度小于 400px 时将改变。 </p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

srcset 属性的必须的，定义了图片资源。

media 属性是可选的，可以在媒体查询的CSS @media 规则 查看详情。

对于不支持 <picture> 元素的浏览器你也可以定义 <img>

ブラウザーがサポート

< td style="幅: 15%; 単語区切り: すべて区切り;" align="center" valign="top"> 1546322463316818.gif
関数 1546322467179911.gif 3.gif 4.gif 5.gif
:訪問済み不サポート38.038.0不サポート25.0

<picture> 元素は <video> に似ています<audio> の元素。 さまざまなソースを設定できます。最初に設定されたソースが最初に使用されます:

例

< div class="example_code">rrreee🎜
运行实例 »🎜点击 "运行实例" 按钮查看在線实例🎜 🎜🎜srcset プロパティは必須であり、画像ソースを定義します。 🎜🎜media プロパティはオプションであり、メディア認証の CSS @media 許可 を参照してください。 <img> の元素を代わりに指定することもできます。
←
→