تصاویر در طراحی ریسپانسیو در CSS
ساده ترین راه و اولین روش برای واکنش گرا کردن تصاویر استفاده از width به صورت درصدی و تعیین ارتفاع به صورت auto است. در این حالت تصویر به راحتی واکنش گرا بوده و با تغییر سایز صفحه اندازه اش را تغییر می دهد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
img {
width:100%;
height:auto;
}
</style>
</head>
<body>
<img src="https://www.w3schools.com/css/img_chania.jpg"width="460"height="345">
<p>Resize the browser window tosee how the image will scale.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر به مثال بالا دقت کرده باشید و با تغییر سایز مرورگر خود تغییر سایز تصویر آن را دیده باشید حتما متوجه شده اید که این تصویر تا بی نهایت بزرگ می شود. بنابراین در نمایشگرهای بسیار بزرگ از اندازه ی اصلی خود هم بزرگ تر می شود که در نوع خود باعث افت کیفیت است. بنابراین بهتر است از max-width استفاده کنید تا حداکثر عرض را مشخص کنید.
استفاده از max-width
اگر خاصیت max-width را روی 100 درصد گذاشته باشید، تصویر واکنش گرا بوده و به نسبت عرض صفحه بزرگ تر می شود اما هیچگاه بزرگ تر از اندازه ی اصلی خودش نخواهد شد. به این مثال دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
img {
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<img src="https://www.w3schools.com/css/img_chania.jpg"width="460"height="345">
<p>Resize the browser window tosee how the image will scale when the width isless than460px.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
برای مشاهده ی تغییر باید به صفحه ی خروجی این کد بروید و اندازه ی قسمت خروجی را تا می توانید بزرگ کنید. تصویر تا قسمتی بزرگ می شود اما از جایی به بعد دیگر تغییر نمی کند.
حالا می توانیم به همین روش تصویری به مثال پروژه مان (مثال از قسمت های قبلی) اضافه کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
img {
width:100%;
height:auto;
}
.row:after {
content:"";
clear:both;
display:table;
}
[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:01px3pxrgba(0,0,0,0.12),01px2pxrgba(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:01px3pxrgba(0,0,0,0.12),01px2pxrgba(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 isthe capital of the Chania region on the island of Crete.The city can be divided intwo parts,the old town andthe modern city.</p>
<img src="https://www.w3schools.com/css/img_chania.jpg"width="460"height="345">
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>Chania isacity on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete isaGreek island inthe Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window tosee how the content respond tothe resizing.</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تصاویر پس زمینه
تصاویر پس زمینه نیز می توانند واکنش گرا باشند. در واقع سه روش مختلف برای واکنش گرا کردن این تصاویر وجود دارد که آن ها را بررسی می کنیم:
روش اول: اگر خصوصیت background-size را روی contain قرار دهید، تصویر پس زمینه سعی می کند خودش را با تغییر عرض تغییر دهد و فضای محتوا را پُر کند. در این روش تصویر، نسبت طول و عرض خود را حفظ می کند و این نسبت از بین نمی رود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
div {
width:100%;
height:400px;
background-image:url('https://www.w3schools.com/css/img_flowers.jpg');
background-repeat:no-repeat;
background-size:contain;
border:1pxsolidred;
}
</style>
</head>
<body>
<p>Resize the browser window tosee the effect.</p>
<div></div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که می بینید در این مثال تصویر سعی می کند که فضای خالی را پُر کند اما هیچگاه نسبت طول و عرض خود را بهم نمی ریزد بنابراین به ناچار قسمت هایی از مستطیل قرمز خالی می ماند.
روش دوم: اگر مقدار خصوصیت background-size را روی “%100 %100” قرار دهید، تصویر آنقدر خود را می کِشد که فضای خالی را به هر قیمتی پُر کند. به این مثال توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
div {
width:100%;
height:400px;
background-image:url('https://www.w3schools.com/css/img_flowers.jpg');
background-size:100%100%;
border:1pxsolidred;
}
</style>
</head>
<body>
<p>Resize the browser window tosee the effect.</p>
<div></div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
روش سوم: اگر مقدار خصوصیت background-size را روی cover قرار دهید، تصویر تمام فضای محتوا را می پوشاند. توجه کنید که cover نسبت طول و عرض تصویر را نیز حفظ می کند. بنابراین برای آنکه تصویر را نمی کشد بلکه با همان نسبت طول و عرض بزرگ می کند، قسمتی از تصویر بریده خواهد شد. این موضوع را در مثال زیر می بینید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
div {
width:100%;
height:400px;
background-image:url('https://www.w3schools.com/css/img_flowers.jpg');
background-size:cover;
border:1pxsolidred;
}
</style>
</head>
<body>
<p>Resize the browser window tosee the effect.</p>
<div></div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تصاویر مختلف برای عرض های مختلف
ممکن است تصویر بسیار بزرگی داشته باشید که روی صفحات دسکتاپ و صفحات بزرگ دیگر به خوبی نمایش داده شود اما برای گوشی های همراه اصلا مناسب نباشد. در این حالت چرا تصویر بزرگی را بارگذاری کنیم که بعدا با کدها آن را کوچک کنیم؟! برای جلوگیری از بارگذاری تصاویر بزرگ و کاهش زمان بالا آمدن صفحات می توانیم از media query ها استفاده کنیم تا تصاویر مختلفی را بر اساس سایز صفحه ی نمایشگر کاربر برای او بارگذاری کنیم. به این مثال دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
/* For width smaller than 400px: */
body {
background-repeat:no-repeat;
background-image:url('https://www.w3schools.com/css/img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image:url('https://www.w3schools.com/css/img_flowers.jpg');
}
}
</style>
</head>
<body>
<pstyle="margin-top:360px;">Resize the browser width andthe background image will change at400px.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
البته می توانید به جای min-width از min-device-width استفاده کنید؛ بدین صورت CSS اندازه ی نمایشگر دستگاه کاربر (موبایل، تبلت و …) را چک می کند نه اندازه ی مرورگر کاربر را! در چنین حالتی اگر اندازه ی مرورگر را تغییر دهید، تصویر تغییری نخواهد کرد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
/* For device width smaller than 400px: */
body {
background-repeat:no-repeat;
background-image:url('https://www.w3schools.com/css/img_smallflower.jpg');
}
/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
background-image:url('https://www.w3schools.com/css/img_flowers.jpg');
}
}
</style>
</head>
<body>
</body>
</html>
|
مشاهده ی خروجی در JSBin
عنصر <picture>
عنصر <picture> روش دیگر استفاده از تصاویر مختلف برای عرض های مختلف است. وضعیت پشتیبانی از این عنصر به صورت زیر می‌باشد:
| عنصر |
کروم |
edge |
فایرفاکس |
اپرا |
سافاری |
| <picture> |
38.0 |
13 |
38.0 |
9.1 |
25.0 |
در واقع عنصر <picture> دقیقا شبیه به عناصر <video> و <audio> کار می کند؛ شما چندین منبع مختلف را تعیین می کنید و اولین منبعی که طبق مشخصات باشد به کاربر نمایش داده می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source srcset="https://www.w3schools.com/css/img_smallflower.jpg"media="(max-width: 400px)">
<source srcset="https://www.w3schools.com/css/img_flowers.jpg">
<img src="https://www.w3schools.com/css/img_flowers.jpg"alt="Flowers"style="width:auto;">
</picture>
<p>Resize the browser width andthe background image will change at400px.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
دستور srcset الزامی است و باید حتما حضور داشته باشد. کار آن تعیین منبع تصویر است. دستور media دلخواه است و برخی از media query های از پیش تعریف شده در CSS را قبول می کند. البته حواستان باشد که حتما یک <img> نیز تعریف کنید تا مرورگرهایی که از <picture> پشتیبانی نمی کنند بدون تصویر نمایش داده نشوند.
ویدیوها در طراحی ریسپانسیو در CSS
اگر خصوصیت width ویدیو را روی 100 درصد قرار دهید، ویدیو واکنش گرا شده و با تغییر سایز صفحه تغییر سایز می دهد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
video {
width:100%;
height:auto;
}
</style>
</head>
<body>
<video width="400"controls>
<source src="https://www.w3schools.com/css/mov_bbb.mp4"type="video/mp4">
<source src="https://www.w3schools.com/css/mov_bbb.ogg"type="video/ogg">
Your browser does notsupport HTML5 video.
</video>
<p>Resize the browser window tosee how the size of the video player will scale.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
البته همانطور که برای تصاویر هم ذکر شد، این روش باعث می شود که ویدیو در مانیتورهای بزرگ از اندازه ی اصلی خودش بزرگ تر شود. بنابراین max-width انتخاب بهتری خواهد بود.
ما در مثال زیر از max-width استفاده کرده و آن را روی 100 درصد قرار داده ایم. در این حالت ویدیو هیچ وقت از اندازه ی اصلی خودش بزرگ تر نخواهد شد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<style>
video {
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<video width="400"controls>
<source src="https://www.w3schools.com/css/mov_bbb.mp4"type="video/mp4">
<source src="https://www.w3schools.com/css/mov_bbb.ogg"type="video/ogg">
Your browser does notsupport HTML5 video.
</video>
<p>Resize the browser window tosee how the size of the video player will scale when the width isless than400px.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
امیدواریم از بحث طراحی عکس و ویدئو به صورت ریسپانسیو در CSS استفاده کافی را برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟