ต่อไป »

[webbaby]

สมมติผมต้องการให้รูปใน div    ให้ width 100%  แล้วรูปทีีมีมีนเป็น สี่เหลียมผืนผ้า อยากให้มันแสดง เป็นสี่เหลี่ยมจตุรัส  โดยมีสัดส่วนที่แสดงเท่าเดิม   

[momo2]

ขอบคุณครับ

[lomkrodsp]

แล้วรูปมันจะดูรู้เรื่องไหมละ่ครับ

[Oii]

ขอบคุณครับ

^ คนนี้จะเนียนก็น่าเกลียดเกิ๊น... 


ที่จริงน่าจะเอาโค้ดมาให้ดูหน่อย อ่านคำถามแล้วงงๆ แต่พอเข้าใจได้ประมาณนี้

ถ้าเป็นผมคงกำหนด css ไว้แบบ div ซ้อนกัน ตัวนอกใช้ position:relative; ส่วน div ตัวข้างในใช้ position:absolute;background-color:#fff; แต่ติดที่มันเป็นสี่เหลี่ยมผืนผ้านี่แหละ คงต้องทำ div ไว้สองข้าง left กับ right แล้วให้เห็นรูปตรงกลางเป็นสี่เหลี่ยมผืนผ้า

แต่ถ้าเข้าใจอีกแบบก็เขียน css style กำหนดบังคับความกว้างสูงของรูปให้เท่ากันไปเลย (แต่กรณีนี้น่าจะทำได้อยู่แล้ว คงไม่น่าจะมาถาม)

(ผมขี้เกียจเขียนออกมาเป็นโค้ด ไว้ท่านอื่นแล้วกัน ) 

[MD.18]

ต้องการทำรูปผืนผ้าให้เป้นจัสตุรัสโดยที่ยังคงกว้าง100%เป้นผืนผ้าอยู่ อย่างงี้ใช่ไหมม    งงคำถามครับ  หรือต้องถอดรหัสก่อน....

[wasantec]

ตัดรูปให้เป็น 4เหลี่ยมผื่นผ้าเลยไม่ง่ายกว่าหลอครับ เพราะถ้าเอา CSS บีบภาพจะดูเพี้ยนนะ

[nukerman]

http://codepen.io/anon/pen/Romyqg

[BakKheab]

สมมติผมต้องการให้รูปใน div    ให้ width 100%  แล้วรูปทีีมีมีนเป็น สี่เหลียมผืนผ้า อยากให้มันแสดง เป็นสี่เหลี่ยมจตุรัส  โดยมีสัดส่วนที่แสดงเท่าเดิม   

มีรูปเป็นสี่เหลี่ยมผืนผ้า แต่อยากให้แสดงเป็นสี่เหลี่ยมจตุรัส แล้วมันจะมีสัดส่วนเท่าเดิมได้ยังไงครับ

[jojoecung]

ประมานนี้ป่าวครับ ต้นฉบับเป็น สี่เหลี่ยมผืนผ้า


แต่ให้โชว์ให้เห็นแค่บางส่วน เป็นสีเหลี่ยมจตุรัส โดยที่ไม่ได้ปรับขนาดให้ภาพผิดอัตราส่วน  แต่เหมือนแสดงผลแค่บางส่วน  ปิดส่วนที่เกินไว้

[picharnan]

https://jsfiddle.net/hnbw9pz7/

[superjak]

css ใช้ clip ซึ่งโคตรจะไม่สะดวก สู้ตัดรูปใน ps ให้เสร็จแล้วเอามาลง เวิร์คกกว่า โค๊ด ประมาณ

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

แต่ถ้าเป็น featured image ของ wordpress เราจะเขียน custom  ไซส์ สั่งครอป อันนี้สะดวก

[MD.18]

โค๊ด:

<style>
.box{postition:relative:display:block;width:300px;height:300px;overflow:hidden;border-radius:6px;padding:10px;box-sizing: border-box;margin:0 auto;box-shadow:2px 2px 20px rgba(0,0,0,0.3);}
.img-in{width:100%;height:100%;display:flex;overflow:hidden;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}
</style>
<div class="box">
<div class="img-in">
<img src="xxxx.jpg" title="xxxx" alt="">
</div>
</div>

  น่าจะพอได้ยังไม่ได้เทสนะ ใช้flex เพื่อให้มันจัดกลางง่ายๆหน่อย แต่ใส่ไม่ครบทุกบราวเซอร์นะหาวิธีต่อในเน็ตเอามันเยอะ -  -

[zoriiz]

fix ขนาด div ข้างนอกเป็นสี่เหลี่ยมจตุรัส แล้วใช้ overflow: hidden ได้มั้ยครับ