gambar


Reka Bentuk Web Responsif - Imej

Gunakan atribut lebar

Jika atribut lebar ditetapkan kepada 100%, imej akan menjadi dilaksanakan mengikut julat atas dan bawah Fungsi responsif:

Instance

<!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>

Run instance»

Klik "Run Butang Instance" untuk melihat contoh dalam talian

Perhatikan bahawa dalam contoh di atas, imej akan lebih besar daripada imej asalnya. Kita boleh menggunakan atribut max-width untuk menyelesaikan masalah ini dengan baik.

Gunakan atribut max-width

Jika atribut max-width ditetapkan kepada 100%, imej tidak akan lebih besar daripada saiz asalnya:

Contoh

<!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>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Tambahkan gambar pada halaman web

Instance

<!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>

Jalankan instance?

Klik "Run Instance" butang untuk melihat contoh dalam talian

Imej Latar Belakang

Imej latar belakang boleh diubah saiz atau diskalakan secara responsif.

Berikut ialah tiga kaedah berbeza:

1 Jika sifat saiz latar belakang ditetapkan kepada "mengandungi", imej latar belakang akan menyesuaikan secara berkadar dengan kawasan kandungan. Imej mengekalkan perkadarannya:


Berikut ialah kod CSS:

Contoh

<!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>

Jalankan instance»

Klik butang "Run instance" untuk melihat contoh dalam talian

2 Jika atribut saiz latar belakang ditetapkan kepada "100% 100%", latar belakang Imej akan terbentang untuk meliputi seluruh kawasan:


Instance

<!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>

Running Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

3. Jika sifat bersaiz latar belakang ditetapkan kepada "penutup", imej latar belakang akan dikembangkan menjadi cukup besar supaya imej latar belakang sepenuhnya meliputi kawasan latar belakang. Ambil perhatian bahawa sifat ini mengekalkan perkadaran imej supaya Sesetengah bahagian imej latar belakang tidak boleh dipaparkan dalam kawasan penambat latar belakang.


Ini ialah kod CSS:

Instance

<!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>

Jalankan instance »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Peranti berbeza memaparkan gambar berbeza

Gambar bersaiz besar boleh dipaparkan pada saiz besar skrin, tetapi pada skrin kecil Ia tidak kelihatan dengan baik pada skrin. Kami tidak perlu memuatkan imej besar pada skrin kecil, kerana ini akan menjejaskan kelajuan pemuatan. Jadi kita boleh menggunakan pertanyaan media untuk memaparkan imej yang berbeza berdasarkan peranti yang berbeza.

Imej besar dan kecil berikut akan dipaparkan pada peranti berbeza:

>

Jalankan contoh»

Klik "Jalankan contoh" butang untuk melihat contoh dalam talian

Anda boleh menggunakan lebar peranti min bagi pertanyaan media dan bukannya atribut lebar min , ia akan mengesan lebar peranti dan bukannya lebar penyemak imbas. Saiz imej tidak berubah apabila penyemak imbas diubah saiznya.
Instance

<!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>

Run instance »

Klik butang "Run Instance" untuk melihat instance dalam talian

elemen HTML5 <gambar>

elemen HTML5 <picture> boleh menetapkan berbilang gambar.

Penyemak imbas menyokong elemen

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

<picture> yang serupa dengan elemen <video> dan <audio>. Sumber yang berbeza boleh dikonfigurasikan. Set sumber pertama adalah yang diutamakan:

Instance

<!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>

Running Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

srcset Atribut diperlukan dan mentakrifkan sumber imej. Atribut

media adalah pilihan, butiran boleh didapati dalam peraturan CSS @media pertanyaan media.

Untuk penyemak imbas yang tidak menyokong elemen <picture>, anda juga boleh menentukan elemen <img> sebaliknya.

←
→