يعرض CSS صورة تم تغيير حجمها واقتصاصها

Question

أريد عرض صورة من عنوان URL بعرض وارتفاع معين حتى لو كانت نسبة الحجم مختلفة.لذلك أريد تغيير الحجم (الحفاظ على النسبة) ثم قص الصورة إلى الحجم الذي أريده.

يمكنني تغيير الحجم باستخدام HTML img الممتلكات ويمكنني أن قطع مع background-image.
كيف يمكنني أن أفعل كلا الأمرين؟

مثال:

هذه الصورة:

لديه الحجم 800x600 بكسل وأريد أن تظهر مثل صورة 200x100 بكسل

مع img يمكنني تغيير حجم الصورة 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

هذا يعطيني هذا:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

ومع background-image يمكنني قص الصورة 200x100 بكسل.

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

يعطيني:

<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

كيف يمكنني أن أفعل كلا الأمرين؟
تغيير حجم الصورة ثم قصها بالحجم الذي أريده؟

Answer 1

هل يمكن استخدام مزيج من الطريقتين على سبيل المثال.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

ويمكنك استخدام margin سلبية لنقل الصورة حول داخل <div/>.

Answer 2

ومع CSS3 انه من الممكن تغيير حجم background-image مع background-size ، وتحقيق هدفي في آن واحد.

وهناك مجموعة من الأمثلة حول <أ href = على "HTTP: //www.css3.info "يختلط =" نوفولو noreferrer "> css3.info .

نفذت بناء على مثالك ، وذلك باستخدام <لأ href = "HTTP: // IMG1. jurko.net/wall/paper/donald_duck_4.jpg "يختلط =" نوفولو noreferrer "> donald_duck_4.jpg . في هذه الحالة، background-size: cover; هو فقط ما تريد - تناسبها background-image لتغطية كامل مساحة تحتوي على <div> ومقاطع الزيادة (اعتمادا على نسبة)

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

<div class="with-bg-size">Donald Duck!</div>

CSS3 <فئة = "مرحلة ما بعد سمة "أ href =" / الأسئلة / المعلمة / خلفية صورة "عنوان =" عرض الأسئلة الموسومة "خلفية صورة" يختلط = "العلامة"> خلفية صورة <فئة = "ما بعد سمة" أ href = "/ الأسئلة / المعلمة / خلفية بحجم" عنوان = "الأسئلة المعرض الموسومة" خلفية بحجم "يختلط =" العلامة "> خلفية حجم

Answer 3

هل حاولت استخدام هذا؟

.centered-and-cropped { object-fit: cover }

وأنا في حاجة لتغيير حجم الصورة، والمركز (رأسيا وأفقيا) ومن المحاصيل ذلك.

وكنت سعيدا للعثور على، وأنه يمكن أن يتم ذلك في سطر واحد المغلق. تحقق المثال هنا: http://codepen.io/chrisnager/pen/azWWgr/ ؟ المحررين = 110

---

وهنا هو CSS وHTMLcode من هذا المثال:

.centered-and-cropped { object-fit: cover }

<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

Answer 4

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

ووdiv الذي يحتوي أساسا مع اقتصاص الصورة عن طريق إخفاء تجاوز.

Answer 5

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

Answer 6

وبفضل sanchothefat.

ولدي تحسن إلى إجابتك. كما تم تصميم المحاصيل جدا لكل صورة، وينبغي أن تكون هذه التعاريف في HTML بدلا من CSS.

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

Answer 7

object-fit قد تساعدك، إذا كنت تلعب مع <img> بطاقة شعار

سيقوم الكود أدناه بقص صورتك لك.يمكنك اللعب مع تناسب الكائن

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

Answer 8

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

Answer 9

في الطبقة المحاصيل، ووضع حجم الصورة التي تريدها أن تظهر:

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

وسوف أتش تي أم أل تبدو:

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

Answer 10

<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

---

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

Answer 11

مثال حي:https://jsfiddle.net/de4Lt57z/

لغة البرمجة:

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS:

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

توضيح:هنا يتم تغيير حجم الصورة حسب قيمة العرض والارتفاع للصورة.ويتم الاقتصاص بواسطة خاصية المقطع.

للحصول على تفاصيل حول خاصية المقطع اتبع:http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

Answer 12

ويمكنك وضع علامة img في علامة div والقيام على حد سواء، ولكن أنصح ضد تحجيم الصور في المتصفح. انه يقوم بعمل رديء أكثر من مرة بسبب المتصفحات لها خوارزميات التحجيم غاية في التبسيط. الأفضل أن تفعل القياس الخاصة بك في برنامج فوتوشوب أو يماغيماغيك أولا، ثم خدمة ليصل إلى لطيفة العميل وجميلة.

Answer 13

وما قمت به هو إنشاء برنامج نصي من جانب الخادم التي من شأنها تغيير حجم واقتصاص صورة على نهاية الملقم لذلك سوف نرسل بيانات أقل عبر interweb.

وانها تافهة إلى حد ما، ولكن إذا كان أي شخص مهتم، ويمكنني أن حفر وإضافة رمز (asp.net)

Answer 14

وهناك <لأ href = "http://blog.filestack.com/api/how-to-automatically-resize-fit-and-align-any-image-using-only-url-parameters/" يختلط = "نوفولو noreferrer"> خدمات مثل Filestack من شأنها أن تفعل هذا بالنسبة لك.

وأنها تأخذ رابط الصورة ويسمح لك لتغيير حجمه باستخدام معلمات رابط. فمن السهل جدا.

وأن صورتك تبدو هذه بعد تغيير حجم ل200x100 ولكن الحفاظ على نسبة الارتفاع

وهذا رابط كله يبدو مثل هذا

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

ولكن الجزء المهم هو فقط

resize=width:200/crop=d:[0,25,200,100]

Answer 15

<div class="crop">
    <img src="image.jpg"/>
</div>

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

Answer 16

إذا كنت تستخدم التمهيد، حاول استخدام { background-size: cover; } ل<div> ربما تعطي شعبة فئة يقول <div class="example" style=url('../your_image.jpeg');> حتى يصبح div.example{ background-size: cover}

Answer 17

كنت بحاجة للقيام بذلك مؤخرا.كنت أرغب في إنشاء رابط مصغر للرسم البياني لـ NOAA.وبما أن الرسم البياني الخاص بهم يمكن أن يتغير في أي وقت، فقد أردت أن تتغير الصورة المصغرة معه.ولكن هناك مشكلة في الرسم البياني الخاص بهم:إنه يحتوي على حد أبيض ضخم في الأعلى، لذا إذا قمت فقط بقياسه لجعل الصورة المصغرة سينتهي بك الأمر بمسافة بيضاء غريبة في المستند.

وإليك كيف قمت بحلها:

http://sealevel.info/example_css_scale_and_crop.html

في البداية كنت بحاجة إلى القيام بالقليل من العمليات الحسابية.الصورة الأصلية من NOAA هي 960 × 720 بكسل، لكن أعلى سبعين بكسل هي منطقة حدود بيضاء زائدة عن الحاجة.كنت بحاجة إلى صورة مصغرة بحجم 348 × 172، بدون منطقة الحدود الإضافية في الأعلى.وهذا يعني أن الجزء المطلوب من الصورة الأصلية يكون بارتفاع 720 - 70 = 650 بكسل.كنت بحاجة إلى تقليص ذلك إلى 172 بكسل، أي 172/650 = 26.5%.وهذا يعني أن 26.5% من 70 = 19 صفًا من وحدات البكسل يجب حذفها من أعلى الصورة التي تم تغيير حجمها.

لذا…

1. ضبط الارتفاع = 172 + 19 = 191 بكسل:

   الارتفاع = 191

2. اضبط الهامش السفلي على -19 بكسل (تقصير الصورة إلى ارتفاع 172 بكسل):

   الهامش السفلي:-19 بكسل

3. اضبط الموضع العلوي على -19 بكسل (مع نقل الصورة لأعلى، بحيث تتجاوز الصفوف الـ 19 بكسل العلوية وتكون مخفية بدلاً من الصفوف السفلية):

   أعلى: -19 بكسل

يبدو HTML الناتج كما يلي:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

كما ترون، اخترت تصميم العلامة التي تحتوي على <a>، ولكن يمكنك تصميم <div> بدلاً من ذلك.

أحد عناصر هذا الأسلوب هو أنه إذا قمت بإظهار الحدود، فسيكون الحد العلوي مفقودًا.وبما أنني أستخدم border=0 على أي حال، لم تكن هذه مشكلة بالنسبة لي.