تصاویر ریسپانسیو با سایز دلخواه
سلام وقت بخیر یه سوال داشتم خدمتتون
تصاویر ریسپانسیو با سایز دلخواه چگونه نوشته میشن؟
برای مثال سایت
https://www.beatkhor.com/
به صورت خیلی زیبا عکس تغییر سایز میده و یا همینطور صفحه اصلیش :
https://www.beatkhor.com/product-tag/free/
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام ایا شما برای این کار از فریم ورکی میخواین استفاده کنید؟
مثل 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>
سلام وقت بخیر
<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>
</body></html>
بله متوجه گرید بندی هستم .
قصد دارم ارتفاع یا همون هایت عکس 277px باشه در واقع روشی که گفتید فقط در width اثر داره
سلام ایا شما برای این کار از فریم ورکی میخواین استفاده کنید؟
مثل 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>