एचटीएमएल - बूटस्ट्रैप - छवि के केंद्र भाग को कैसे फसल करें

Question

मैं एक वेबसाइट बना रहा हूं और मैं छवि के अभिविन्यास के आधार पर एक छवि को एक स्क्वायर छवि में फसल करना चाहता हूं। मैं सीएसएस से वास्तव में परिचित नहीं हूं इसलिए मुझे यकीन नहीं है कि इस समस्या से कैसे निपटें।

यदि यह चित्र (400x600) है तो यह इस हिस्से बाहर फसल चाहिए (400x400:

यदि यह एक परिदृश्य छवि (800x500) है तो मैं फसली छवि इस तरह होना चाहते हैं (500x500)) छवि के:

मैं कैसे के बारे में इस लक्ष्य को हासिल करने के लिए जाना चाहिए? अधिमानतः एक विधि जिसे मैं बूटस्ट्रैप के "आईएमजी-उत्तरदायी" के साथ उपयोग कर सकता हूं, इसलिए जब आवश्यक हो तो मैं फसल का आकार बदल सकता हूं।

धन्यवाद, टैग, जिससे आपकी छवि को स्केल और चौड़ाई/ऊंचाई अनुपात रखेंगे img को

Answer 1

@ FljpFl0p तय यह [jsfiddle] [1]

[1]: https://www.bootply.com/92024 और वहाँ एक और उत्तर यहाँ How to automatically crop and center an image है। टी.के.एस!

यदि आप चाहते हैं कि उसे उत्तरदायी और बूटस्ट्रैप 4. उपयोग करने का प्रयास इस एक:

सीएसएस

.thumb-post img { 
    object-fit: none; /* Do not scale the image */ 
    object-position: center; /* Center the image within the element */ 
    width: 100%; 
    max-height: 250px; 
    margin-bottom: 1rem; 
} 

Answer 2

वर्ग जोड़ें img संवेदनशील। यदि आप परिणामों से संतुष्ट नहीं हैं तो मैं जावास्क्रिप्ट का उपयोग करने का प्रयास करूंगा।

Answer 3

सुनिश्चित नहीं हैं कि अगर आप बहुत ही एक सीएसएस दृष्टिकोण तक ही सीमित हैं, लेकिन एक जावास्क्रिप्ट दृष्टिकोण होगा छवि के आयाम को प्राप्त करके और इसे overflow:hidden के साथ एक div में लपेटकर सहायता करें।

$width = $(".box img").css('width'); 
 
$height = $(".box img").css('height'); 
 
$max = (($width < $height) ? $width : $height); 
 

 
$(".box").css("width", $max); 
 
$(".box").css("height", $max);

.box { 
 
    margin: 5px; 
 
    overflow: hidden; 
 
    display: flex; 
 
    justify-content: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="box"> 
 
    <img src="https://placehold.it/300x200"> 
 
</div>