حل شده

تصاویر ریسپانسیو با سایز دلخواه

سلام وقت بخیر یه سوال داشتم خدمتتون
تصاویر ریسپانسیو با سایز دلخواه چگونه نوشته میشن؟
برای مثال سایت
https://www.beatkhor.com/
به صورت خیلی زیبا عکس تغییر سایز میده و یا همینطور صفحه اصلیش :
https://www.beatkhor.com/product-tag/free/

html_css ریسپانسیو تصاویرریسپانسیو

amir jafari

3 سال پیش@sharkbeat

ثبت پرسش جدید

پاسخ‌ها

m.mahmoudi

@m.mahmoudi72763 سال پیش مطرح شد

بهترین پاسخ

سلام ایا شما برای این کار از فریم ورکی میخواین استفاده کنید؟
مثل bootstrap یا ...
اگر به این شکل باشه بهتره از این حالت استفاده کنید.

 <div class="container mt-4  ">
      <div class="row my-5">
           <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3  ">
                      <div class="position-relative ">
                                <img src="./img/talk.png" alt="talk" class="img-fluid border-radius">
                 </div>
         </div>
   </div>
   </div>

ارسال پاسخ

کیاوش نوری

@kiavash_it3 سال پیش مطرح شد

تخصص: نرم افزار

سلام وقت بخیر


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<h2>Responsive Images</h2>

<p>If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto.</p>
<p>صفحه مرورگر رو هم کوچیک بزرگ کن تا ببینی</p>

<img src="img_nature.jpg" alt="Nature" class="responsive" width="600" height="400">

</body>
</html>

البته چیزی که من توی این سایت دیدم برای نمایش عکس ها تو سایز های مختلف مرورگر از سیستم col بندی bootstrap یا media query خود css استفاده شده یعنی توی یک سایز سه تا عکس نشون میده،توی یه سایز پنج تا و ...

</body></html>

ارسال پاسخ