حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود

درج تصویر ریسپانسیو در صفحه

تمرین آسان 1210 visibility link download flag

با استفاده از html و css تصویری با ویژگی های زیر در صفحه درج کنید

آدرس تصویر
متن جاگزین تصویر (کدبزن) باشد
عرض تصویر همیشه 90 درصد عرض صفحه کاربر باشد ولی از 400 پیکسل بیشتر نشود همچنین از 100 پیکسل کوچکتر نشود
تصویر همیشه وسط صفحه (از چپ و راست) قرار گیرد

reply 7

visibility 
C S S__________________
 img{
   display: block;
   margin: auto;
   width: 90vw;
   min-width: 100px;
   max-width: 400px;}                   

H T M L_________________
  <img src="https://code-bezan.ir/static/image/logotype.png" alt="کد بزن">
Unun..ali..nunu HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تصویر با ویژگی‌های خاص</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="https://via.placeholder.com/800" alt="کدبزن" class="responsive-image">
    </div>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* برای مرکز کردن محتوا */
    align-items: center; /* برای مرکز کردن عمودی */
    height: 100vh; /* ارتفاع 100 درصد صفحه */
}

.image-container {
    width: 100%; /* عرض کامل صفحه */
    max-width: 400px; /* حداکثر عرض 400 پیکسل */
    min-width: 100px; /* حداقل عرض 100 پیکسل */
    text-align: center; /* متن جاگزین را مرکز می‌کند */
}

.responsive-image {
    width: 90%; /* عرض تصویر 90 درصد عرض صفحه */
    height: auto; /* حفظ نسبت ابعاد تصویر */
}
User 136 HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تصویر با ویژگی‌های مشخص</title>
    <style>
        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px; /* فاصله از بالا و پایین */
        }

        img {
            width: 90%; /* عرض تصویر 90 درصد عرض صفحه */
            max-width: 400px; /* حداکثر عرض 400 پیکسل */
            min-width: 100px; /* حداقل عرض 100 پیکسل */
            height: auto; /* حفظ نسبت تصویر */
        }
    </style>
</head>
<body>

<div class="image-container">
    <img src="آدرس_تصویر_اینجا" alt="کدبزن">
</div>

</body>
</html>
User 136 HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تصویر</title>
    <style>
        img {
            width: 90%;
            max-width: 400px;
            min-width: 100px;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <img src="https://code-bezan.ir/static/image/logotype.png" alt="کدبزن">
</body>
</html>
پاسخ هوش مصنوعی Ai HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pic</title>
  <style>
    body{
      margin: 0;
      display: flex;
      min-height: 100vh;
      justify-content: center;
      align-items: center;
      background-color: rgb(70, 69, 69);
    }
    img{
      max-width: 400px;
      min-width: 100px;
      width: 90%;
      height: auto;
      border-radius: 20px;
      box-shadow: 0 0 10px white;
      transition: 0.3s;
      opacity: 50%;
    }
    img:hover{
      transform: scale(1.05);
      opacity: 100%;
    }
  </style>
</head>
<body>
  <img src="scr.png" alt="Code-Bezan">
</body>
</html>
Mhrshad.jfri HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تصویر با ویژگی‌های مشخص</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="your-image-url.jpg" alt="کدبزن" class="responsive-image">
    </div>
</body>
</html>
Sumy.amiri HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تصویر با ویژگی‌های مشخص</title>
    <style>
        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px; 
        }

        img {
            width: 80%; 
            max-width: 500px; 
            min-width: 200px; 
            height: auto; 
        }
    </style>
</head>
<body>

<div class="image-container">
    <img src="آدرس_تصویر_اینجا" alt="کدبزن">
</div>

</body>
</html>
F.sarli HTML & CSS

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن