ইমেজ চারপাশে সীমানা সামঞ্জস্য প্রয়োজন উচ্চতা এবং প্রস্থ পরিবর্তন

আমি একটি বৃত্তাকার সীমানা সঙ্গে নিম্নলিখিত ছবি আছে। আমি সীমানা আকার (ব্যাস) পরিবর্তন করতে সক্ষম হতে চাই কিন্তু তাই করার জন্য আমাকে সীমানা ছাড়া ইমেজের প্রস্থ এবং উচ্চতা পরিবর্তন করতে হবে। পাশাপাশি অন্যান্য বৈশিষ্ট্য পরিবর্তন ছাড়া সীমানা আকার পরিবর্তন করা সম্ভব? এখানে আমার এইচটিএমএল এবং CSS ক্লাস। ধন্যবাদ।

<div></div>

.marker {
    width:150px;
    height:150px;
    transform: rotate(50deg) !important;
    position: absolute;
    border:solid 50px rgba(50, 105, 206, 0.5);
    border-radius:150px;
    cursor: pointer;
  }

map marker

0
কেন ইমেজ আকার পরিবর্তন করতে হবে?
যোগ লেখক NikxDa, উৎস
আপনি সীমানা আকার পরিবর্তন করতে চান, শুধু সীমানা সম্পত্তি পরিবর্তন। উদাহরণস্বরূপ: সীমানা: কঠিন 100px rgba (50, 105, 206, 0.5);
যোগ লেখক xepe, উৎস

6 উত্তর

আপনি শুধুমাত্র সীমানা-ব্যাসার্ধ সম্পত্তিটি সত্যিই বড় সংখ্যায় সেট করতে পারেন।

.marker {
    width:150px;
    height:150px;
    transform: rotate(50deg) !important;
    position: absolute;
    border:solid 50px rgba(50, 105, 206, 0.5);
    border-radius:10000px;
    cursor: pointer;
}

তারপরে, আপনি যে কোনও মূল্যের সাথে সীমানা-আকার এ পরিবর্তন করতে পারেন।

1
যোগ

উপাদানটির বক্স-আকার সম্পত্তিটি ডিফল্ট সামগ্রী-বাক্স এ পুনরায় সেট করুন।

Most likely you have some CSS elsewhere that is changing it to border-box

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.marker {
  width: 150px;
  height: 150px;
  transform: rotate(50deg) !important;
  /* position: absolute; */
  border: solid 50px rgba(50, 105, 206, 0.5);
  border-radius: 150px;
  cursor: pointer;
  box-sizing: content-box;
}

.marker-alt {
  box-sizing: border-box;
}
<div></div>

<div></div>
</div> </div>
1
যোগ
যদি চিত্রের উচ্চতা এবং প্রস্থ বাড়ানো না হয় তবে বাইরের বৃত্তের ব্যাস একই থাকে এবং চিত্র মাঝখানে সঙ্কুচিত হয়।
যোগ লেখক Brian Kalski, উৎস
বক্স সাইজিং এবং সীমানা-ব্যাসার্ধটি বড় আকারে পরিবর্তন করে একসাথে কৌশলটি চালাচ্ছিল।
যোগ লেখক Brian Kalski, উৎস
আপনি সীমানা-ব্যাসার্ধ: 50% ব্যবহার করতে পারেন তবে আপনার উপাদানগুলির মাত্রা পরিবর্তন করলে মানটি পরিবর্তন করার বিষয়ে আপনাকে চিন্তা করতে হবে না।
যোগ লেখক Turnip, উৎস

আপনি যা চান তা অর্জন করতে, আপনার সীমানা সম্পত্তিটি এই সাথে প্রতিস্থাপন করুন:

box-shadow: 0 0 0 50px rgba(50, 105, 206, 0.5);

এর সাথে, আপনি বাক্স-ছায়া সম্পত্তি (যেমন 50px মান) স্প্রেড বিকল্পটি পরিবর্তন করে "সীমানা" আকার পরিবর্তন করতে পারেন।

See my example: https://jsbin.com/viyihah/edit?html,css,output

0
যোগ

আপনি ডিভিতে আপনার স্টাইলগুলি সরাতে পারেন তবে আপনি কেবল প্রস্থ এবং উচ্চতার আকার পরিবর্তন করতে পারবেন এবং এটি অন্য কিছুকে প্রভাবিত করবে না:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.marker {
  position: relative;
  box-sizing: border-box;
  width: 150px;
  height: 150px;
  background-color: rgba(50, 105, 206, 0.5);
  border-radius: 50%;
}

.marker img {
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.marker1 {
  width: 250px;
  height: 250px;
  }
  
<div class="marker"></div>
<div class="marker marker1"></div>
</div> </div>

যদি আপনি ছবিতে এটি রাখতে চান, তবে প্রস্থ এবং উচ্চতাটি সরান:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.marker {
  box-sizing: border-box;
  border-color: rgba(50, 105, 206, 0.5);
  border-style: solid;
  border-width:50px;
  border-radius: 50%;
}


.marker1 {
  border-width:150px;
}
<div></div>
<div></div>
</div> </div>
0
যোগ

আপনি সীমানা-প্রস্থ এবং সীমানা-ব্যাসার্ধ: 50%; দিয়ে এটি প্রতিবার ঘোরাতে পারেন।<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.marker {
    width:150px;
    height:150px;
    transform: rotate(50deg) !important;
    position: relative;
    border:solid 100px rgba(50, 105, 206, 0.5);
    border-radius:50%;
    cursor: pointer;
  }
  .marker.sm{
    border-width: 10px;

  }
<div></div>


<div></div>
</div> </div>
0
যোগ

আপনি সীমানা-প্রস্থ এবং সীমানা-ব্যাসার্ধ: 50%; দিয়ে এটি প্রতিবার ঘোরাতে পারেন।<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.marker {
    width:150px;
    height:150px;
    transform: rotate(50deg) !important;
    position: relative;
    border:solid 100px rgba(50, 105, 206, 0.5);
    border-radius:50%;
    cursor: pointer;
  }
  .marker.sm{
    border-width: 10px;

  }
<div></div>


<div></div>
</div> </div>
0
যোগ