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

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

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

آسان 183/ دانلود 72 بازدید

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

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

2 جواب

نمیتونم این تمرین رو حل کنم! 
<!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>
کاربر 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
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

# کداتو توی این بخش بنویس
# فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
# البته قبلش این سه خط رو پاک کن
  • لطفا جواب های تکراری ارسال نکن
  • قبل از ارسال، جوابت رو داخل یک کد ادیتور مثل vscode بنویس و بعد اینجا Paste کن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرینات مرتبط

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

حساب کاربری

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

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

نمیتونم این تمرین رو حل کنم 😞

اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو 😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و یواش یواش به سراغ تمرینات سخت تر بری. همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری

یادگیری برنامه نویسی
بستن