সিএসএসের সাথে ডিভিতে কোনও চিত্র কীভাবে রাখবেন?

Question

আমি আমার সমস্ত চিত্র সিএসএসে রাখতে চাই (কেবলমাত্র আমি জানি কীভাবে তাদের পটভূমির চিত্র হিসাবে রাখা যায়))

তবে এই সমাধানটির সমস্যাটি হ'ল আপনি কখনই ডিভটিকে চিত্রের আকার নিতে দেবেন না।

সুতরাং আমার প্রশ্নটি: <div><img src="..." /></div>সিএসএসের সমতুল্য হওয়ার সর্বোত্তম উপায় কী?

Comments

পটভূমি কোনও বিকল্প নয়: চিত্রগুলি বিষয়বস্তু বোঝার জন্য প্রাসঙ্গিক না হলে ব্যাকগ্রাউন্ড ব্যবহার করতে হবে, অন্যথায় সেগুলি নিয়মিত হওয়া উচিত<img>

— ফ্যাব্রিজিও ক্যালডেরান

ম্যানুয়ালি চিত্রটির আকার খুঁজে বের করা এবং ডিভটি একইরূপে দেওয়া ব্যতীত, আপনি মনে করতে পারেন না can

— জাওয়াদ

সঠিক উপায়: <img>চিত্রটি যদি প্রাসঙ্গিক <div>হয় তবে পটভূমির সাথে যদি চিত্রটি কেবল চোখের ক্যান্ডি থাকে। যদি চিত্রের আকার পরিবর্তনশীল এবং গুরুত্বপূর্ণ হয় তবে আপনার ব্যবহার করা উচিত <img>। আপনি পটভূমি ব্যবহার করতে চান কেন?

— আলেসান্দ্রো পেজ্জাটো

Answer 1

জাপের এই উত্তর :

<div class="image"></div>​

এবং সিএসএসে:

div.image {
   content:url(http://placehold.it/350x150);
}​

আপনি এই লিঙ্কে এটি চেষ্টা করতে পারেন: http://jsfiddle.net/XAh2d/

এটি সিএসএস সামগ্রী সম্পর্কে একটি লিঙ্ক http://css-tricks.com/css-content/

এটি ক্রোম, ফায়ারফক্স এবং সাফারিতে পরীক্ষা করা হয়েছে। (আমি একজন ম্যাকের উপর আছি, সুতরাং কারও কাছে যদি ফলাফল ফলাফল আসে তবে আমাকে এটি যুক্ত করতে বলুন)

Comments

এটি divযেমনটি চেয়েছিল তেমন আকারের আকার নেয় না । আপনি যদি ডিভের একটি সীমানা যুক্ত করেন তবে কী ঘটবে তা দেখুন: jsfiddle.net/XAh2d/6 কিছুই নয়, কারণ ডিভের আকার 0x0 এবং চিত্রের আড়ালে লুকানো রয়েছে।

— আলেসান্দ্রো পেজ্জাটো 31'12

আপনার অপসারণ করা উচিত: আগে, আমি আমার উত্তর সম্পাদনা করেছি। এখানে এটি দেখুন jsfiddle.net/2pFhc

— ড্যানি ওয়াই

@ ড্যানি ওহে, আপনি বলেছিলেন আপনি আপনার ফিডল আপডেট করেছেন তবে আমি সেখানে কেবল সবুজ সীমানা দেখতে পাচ্ছি: jsfiddle.net/2pFhc কেন?

— শারিকভ ভ্লাদিস্লাভ

55 টি ফায়ারফক্সে এটি আমার পক্ষে কাজ করে নি some কিছু ক্রসব্রোজার সিদ্ধান্তের দরকার। আগে | পরে সাথে কাজ করে।

— মার্সেলো বোনাগি

আমার সাথে এফএফ এবং ক্রোমে :: এর আগে এবং প্রদর্শনের সাথে কাজ করে: ফ্লেক্স; => Jsfiddle.net/q0vL1m7v/1

— Catweazle

Answer 2

তুমি এটি করতে পারো:

<div class="picture1">&nbsp;</div>

এবং এটি আপনার সিএসএস ফাইলে রাখুন:

div.picture1 {
   width:100px; /*width of your image*/
   height:100px; /*height of your image*/
   background-image:url('yourimage.file');
   margin:0; /* If you want no margin */
   padding:0; /*if your want to padding */
}

অন্যথায়, কেবল তাদের সরল হিসাবে ব্যবহার করুন

Comments

আমি স্থির আকারগুলি এড়ানোর চেষ্টা করছিলাম।

— ড্যানি ওয়াই

আপনি যদি স্থির আকারগুলি এড়ানোর চেষ্টা করছেন, তবে সহজ উপায়টি হল প্লেইন imgট্যাগটি ব্যবহার করা । আপনি এটি দিয়ে কী সম্পাদন করার চেষ্টা করছেন? পিএইচপি জিটিমেজেসাইজের মাধ্যমে চিত্রের আকার পাওয়ার মতো এবং এর পরেও নির্দিষ্ট কোনও চিত্রটির জন্য একটি অনুরূপ styleএবং imgট্যাগটি প্রতিধ্বনি করার মতো প্রোগ্রামারিকভাবে সমাধান হতে পারে another

— জুডজিৎসু

Answer 3

এটি একটি নমুনা কোড হিসাবে নিন। আপনার চিত্রের মাত্রা সহ চিত্রের উচ্চতা এবং চিত্রের প্রস্থ প্রতিস্থাপন করুন।

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>

Comments

ওয়ার্কস তবে প্রশ্নটি ছিল "সিএসএস" সম্পর্কিত

— মাইকেল বায়ারমান

সম্ভবত এটি করা উচিত নয়।

— জেসনলনহার্ড

Answer 4

জাভাস্ক্রিপ্ট / জ্যাকুরি সহ:

• লুকানো সঙ্গে চিত্র লোড করুন img
• চিত্রটি লোড হয়ে গেলে, প্রস্থ এবং উচ্চতা পান
• গতিশীলভাবে একটি divএবং সেট প্রস্থ, উচ্চতা এবং পটভূমি তৈরি করুন

• আসল অপসারণ img

    $(document).ready(function() {
      var image = $("<img>");
      var div = $("<div>")
      image.load(function() {
        div.css({
          "width": this.width,
          "height": this.height,
          "background-image": "url(" + this.src + ")"
        });
        $("#container").append(div);
      });
      image.attr("src", "test0.png");
    });