ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์CMS & Free Scriptถามหน่อยสิครับ ทำ responsive เว็บ แล้วทำไงให้รูปภาพได้สัดส่วน
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ถามหน่อยสิครับ ทำ responsive เว็บ แล้วทำไงให้รูปภาพได้สัดส่วน  (อ่าน 1187 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
Beboyzo
ก๊วนเสียว
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 305



ดูรายละเอียด เว็บไซต์
« เมื่อ: 18 สิงหาคม 2014, 09:34:10 »

คือ  theme ของ WordPress นะครับ เวลาโหมดโทรศัพท รูปภาพออกมาเน่า มาก เราจะเขียนโค้ดอะไร ทำให้มันออกมาหล่อๆบ่างไหมครับ
บันทึกการเข้า

VadiForte
สมุนแก๊งเสียว
*

พลังน้ำใจ: 125
ออฟไลน์ ออฟไลน์

กระทู้: 876



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 18 สิงหาคม 2014, 09:36:45 »

กำหนดเฉพาะ ความกว้าง หรือความสูง อย่างไดอย่างหนึ่งครับ

ถ้ากำหนดทั้ง 2 อย่างมันจะไม่สวย

หรือไม่ก็ใส่เป็น Max-heigth , Max-width ก็ได้ครับ
บันทึกการเข้า

josephsrawut
สมุนแก๊งเสียว
*

พลังน้ำใจ: 56
ออฟไลน์ ออฟไลน์

กระทู้: 600



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 18 สิงหาคม 2014, 09:44:35 »

แบบนี้ก็ได้ครับ ...

<img src="picture.jpg" style="max-width: 100%; height: auto;">
บันทึกการเข้า
Beboyzo
ก๊วนเสียว
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 305



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 18 สิงหาคม 2014, 11:07:27 »

ขอบคุณครับ ถามเพิ่มเติมอีกนิดนะครับ มันมี Code แบบตัดรูปให้ได้ขนาดไหมครับ แบบว่า พอ ขนาดหน้าจอ 320px ให้ ครอบภาพ ให้เหลือ 320px เหมือนกันอะไรประมาณนี้อ่ะครับ
บันทึกการเข้า

josephsrawut
สมุนแก๊งเสียว
*

พลังน้ำใจ: 56
ออฟไลน์ ออฟไลน์

กระทู้: 600



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 18 สิงหาคม 2014, 11:18:00 »

ขอบคุณครับ ถามเพิ่มเติมอีกนิดนะครับ มันมี Code แบบตัดรูปให้ได้ขนาดไหมครับ แบบว่า พอ ขนาดหน้าจอ 320px ให้ ครอบภาพ ให้เหลือ 320px เหมือนกันอะไรประมาณนี้อ่ะครับ

แบบนี้หรือเปล่าครับ ....

https://wordpress.org/plugins/manual-image-crop

แต่ผมไม่เคยใช้นะครับ
บันทึกการเข้า
sys2528
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 301
ออฟไลน์ ออฟไลน์

กระทู้: 3,601



ดูรายละเอียด
« ตอบ #5 เมื่อ: 18 สิงหาคม 2014, 11:19:53 »

ขอบคุณครับ ถามเพิ่มเติมอีกนิดนะครับ มันมี Code แบบตัดรูปให้ได้ขนาดไหมครับ แบบว่า พอ ขนาดหน้าจอ 320px ให้ ครอบภาพ ให้เหลือ 320px เหมือนกันอะไรประมาณนี้อ่ะครับ

แบบนี้หรือเปล่าครับ ....

https://wordpress.org/plugins/manual-image-crop

แต่ผมไม่เคยใช้นะครับ

อันนี้ก็ดูน่าใช้นะครับ
บันทึกการเข้า

chhopster
สมุนแก๊งเสียว
*

พลังน้ำใจ: 29
ออฟไลน์ ออฟไลน์

กระทู้: 514



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 18 สิงหาคม 2014, 11:23:03 »

โค๊ด:
@media only screen and (max-device-width: 320px) {
    img{
         max-width : 320px;
         height : auto; 
}
}

ลองประมาณนี้ครับ
บันทึกการเข้า

esanza.com
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 270
ออฟไลน์ ออฟไลน์

กระทู้: 3,673



ดูรายละเอียด
« ตอบ #7 เมื่อ: 18 สิงหาคม 2014, 11:48:15 »

ขอบคุณครับ ถามเพิ่มเติมอีกนิดนะครับ มันมี Code แบบตัดรูปให้ได้ขนาดไหมครับ แบบว่า พอ ขนาดหน้าจอ 320px ให้ ครอบภาพ ให้เหลือ 320px เหมือนกันอะไรประมาณนี้อ่ะครับ

โค๊ด:
<style media="all">
img{
max-width:320px;
overflow:hidden;
}
</style>

ลองปรับใช้ดูนะครับ  wanwan016
บันทึกการเข้า

ใครต้องการเช่าโฮสที่มี Control Panel ดีๆ
และ Support ดี แนะนำ => โฮสอะตอม
Beboyzo
ก๊วนเสียว
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 305



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 18 สิงหาคม 2014, 12:00:28 »

ขอบคุณทุกคนนะครับ ตอนนี้ ภาพ หล่อขึ้นเยอะ
บันทึกการเข้า

ShizzK
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 165
ออฟไลน์ ออฟไลน์

กระทู้: 2,512



ดูรายละเอียด
« ตอบ #9 เมื่อ: 18 สิงหาคม 2014, 13:57:07 »

ผมใช้ theme ของ genesis ที่เป็น responsive อะครับ ไม่รู้ว่ารูปภาพพวกนี้มันจะโอเคไหม

แล้วเราเอาโค๊ดที่แนะนำมาไปใส่ตรงไหนเหรอครับ เพื่อให้รูปภาพทั้งหมดแสดงออกมาสวยงามครับ
บันทึกการเข้า
Beboyzo
ก๊วนเสียว
*

พลังน้ำใจ: 6
ออฟไลน์ ออฟไลน์

กระทู้: 305



ดูรายละเอียด เว็บไซต์
« ตอบ #10 เมื่อ: 18 สิงหาคม 2014, 17:22:17 »

ผมใช้ theme ของ genesis ที่เป็น responsive อะครับ ไม่รู้ว่ารูปภาพพวกนี้มันจะโอเคไหม

แล้วเราเอาโค๊ดที่แนะนำมาไปใส่ตรงไหนเหรอครับ เพื่อให้รูปภาพทั้งหมดแสดงออกมาสวยงามครับ

ผมคิดว่า Theme ที่เค้าออกมาขาย น่าจะออกแบบพวกรูปภาพมาในระดับ หนึ่งแล้วนะครับ ส่วนโค๊ดจะเอาไป แป๊ะที่ ไฟล์ style.css ครับป๋ม
บันทึกการเข้า

หน้า: [1]   ขึ้นบน
พิมพ์