یادگیری برنامه نویسی با 60% تخفیف + هدیه ویژه در جشنواره نوروزی کلیک کنید

تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

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

تمرین آسان 183/ دانلود 280 بازدید

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

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

4 جواب

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="کد بزن">

the professional answer Unun..ali..nunu


<!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>
    <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>
Arman.danyy دانلود HTML & CSS

ارسال جواب

  • قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
  • لطفا جواب های تکراری ارسال نکن
  • سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
  • لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

مطالب مرتبط

تشخیص با استفاده از هوش مصنوعی
×
×
بستن