عکس و ویدیوی ریسپانسیو در css | واکنش گرا کردن عکس و فیلم

تصاویر در طراحی ریسپانسیو در CSS

ساده ترین راه و اولین روش برای واکنش گرا کردن تصاویر استفاده از width به صورت درصدی و تعیین ارتفاع به صورت auto است. در این حالت تصویر به راحتی واکنش گرا بوده و با تغییر سایز صفحه اندازه اش را تغییر می دهد:

<!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 to see how the image will scale.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر به مثال بالا دقت کرده باشید و با تغییر سایز مرورگر خود تغییر سایز تصویر آن را دیده باشید حتما متوجه شده اید که این تصویر تا بی نهایت بزرگ می شود. بنابراین در نمایشگرهای بسیار بزرگ از اندازه ی اصلی خود هم بزرگ تر می شود که در نوع خود باعث افت کیفیت است. بنابراین بهتر است از max-width استفاده کنید تا حداکثر عرض را مشخص کنید.

استفاده از max-width

اگر خاصیت max-width را روی 100 درصد گذاشته باشید، تصویر واکنش گرا بوده و به نسبت عرض صفحه بزرگ تر می شود اما هیچگاه بزرگ تر از اندازه ی اصلی خودش نخواهد شد. به این مثال دقت کنید:

<!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 to see how the image will scale when the width is less than 460px.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

برای مشاهده ی تغییر باید به صفحه ی خروجی این کد بروید و اندازه ی قسمت خروجی را تا می توانید بزرگ کنید. تصویر تا قسمتی بزرگ می شود اما از جایی به بعد دیگر تغییر نمی کند.

حالا می توانیم به همین روش تصویری به مثال پروژه مان (مثال از قسمت های قبلی) اضافه کنیم:

<!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: 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://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 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>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

تصاویر پس زمینه

تصاویر پس زمینه نیز می توانند واکنش گرا باشند. در واقع سه روش مختلف برای واکنش گرا کردن این تصاویر وجود دارد که آن ها را بررسی می کنیم:

روش اول: اگر خصوصیت background-size را روی contain قرار دهید، تصویر پس زمینه سعی می کند خودش را با تغییر عرض تغییر دهد و فضای محتوا را پُر کند. در این روش تصویر، نسبت طول و عرض خود را حفظ می کند و این نسبت از بین نمی رود:

<!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: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید در این مثال تصویر سعی می کند که فضای خالی را پُر کند اما هیچگاه نسبت طول و عرض خود را بهم نمی ریزد بنابراین به ناچار قسمت هایی از مستطیل قرمز خالی می ماند.

روش دوم: اگر مقدار خصوصیت background-size را روی "%100 %100" قرار دهید، تصویر آنقدر خود را می کِشد که فضای خالی را به هر قیمتی پُر کند. به این مثال توجه کنید:

<!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: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

مشاهده ی خروجی در JSBin

روش سوم: اگر مقدار خصوصیت background-size را روی cover قرار دهید، تصویر تمام فضای محتوا را می پوشاند. توجه کنید که cover نسبت طول و عرض تصویر را نیز حفظ می کند. بنابراین برای آنکه تصویر را نمی کشد بلکه با همان نسبت طول و عرض بزرگ می کند، قسمتی از تصویر بریده خواهد شد. این موضوع را در مثال زیر می بینید:

<!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: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

مشاهده ی خروجی در JSBin

تصاویر مختلف برای عرض های مختلف

ممکن است تصویر بسیار بزرگی داشته باشید که روی صفحات دسکتاپ و صفحات بزرگ دیگر به خوبی نمایش داده شود اما برای گوشی های همراه اصلا مناسب نباشد. در این حالت چرا تصویر بزرگی را بارگذاری کنیم که بعدا با کدها آن را کوچک کنیم؟! برای جلوگیری از بارگذاری تصاویر بزرگ و کاهش زمان بالا آمدن صفحات می توانیم از media query ها استفاده کنیم تا تصاویر مختلفی را بر اساس سایز صفحه ی نمایشگر کاربر برای او بارگذاری کنیم. به این مثال دقت کنید:

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

<p style="margin-top:360px;">Resize the browser width and the background image will change at 400px.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

البته می توانید به جای min-width از min-device-width استفاده کنید؛ بدین صورت CSS اندازه ی نمایشگر دستگاه کاربر (موبایل، تبلت و ...) را چک می کند نه اندازه ی مرورگر کاربر را! در چنین حالتی اگر اندازه ی مرورگر را تغییر دهید، تصویر تغییری نخواهد کرد:

<!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> کار می کند؛ شما چندین منبع مختلف را تعیین می کنید و اولین منبعی که طبق مشخصات باشد به کاربر نمایش داده می شود:

<!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 and the background image will change at 400px.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

دستور srcset الزامی است و باید حتما حضور داشته باشد. کار آن تعیین منبع تصویر است. دستور media دلخواه است و برخی از media query های از پیش تعریف شده در CSS را قبول می کند. البته حواستان باشد که حتما یک <img> نیز تعریف کنید تا مرورگرهایی که از <picture> پشتیبانی نمی کنند بدون تصویر نمایش داده نشوند.

ویدیوها در طراحی ریسپانسیو در CSS

اگر خصوصیت width ویدیو را روی 100 درصد قرار دهید، ویدیو واکنش گرا شده و با تغییر سایز صفحه تغییر سایز می دهد:

<!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 not support HTML5 video.
</video>

<p>Resize the browser window to see how the size of the video player will scale.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

البته همانطور که برای تصاویر هم ذکر شد، این روش باعث می شود که ویدیو در مانیتورهای بزرگ از اندازه ی اصلی خودش بزرگ تر شود. بنابراین max-width انتخاب بهتری خواهد بود.

ما در مثال زیر از max-width استفاده کرده و آن را روی 100 درصد قرار داده ایم. در این حالت ویدیو هیچ وقت از اندازه ی اصلی خودش بزرگ تر نخواهد شد:

<!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 not support HTML5 video.
</video>

<p>Resize the browser window to see how the size of the video player will scale when the width is less than 400px.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

امیدواریم از بحث طراحی عکس و ویدئو به صورت ریسپانسیو در CSS استفاده کافی را برده باشید.