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

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

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingขอคำแนะนำในเรื่องของการแสดงภาพโดยใช้ css ทีครับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ขอคำแนะนำในเรื่องของการแสดงภาพโดยใช้ css ทีครับ  (อ่าน 887 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
dekjaidee
Newbie
*

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

กระทู้: 83



ดูรายละเอียด
« เมื่อ: 06 สิงหาคม 2018, 08:15:35 »

เนื่องจากแสดงภาพข่าวขึ้นมา โดยใช้ css กำหนดความกว้าง และความสูง ปัญหาคือ ภาพแสดงออกมาไม่สวยงาน บางทีแสดงแค่เส้นผม ไม่แสดงรูปแบบชัดเจน

ขอคำแนะนำทีครับ หรือว่า css ที่ผมเอาลงนี้มีส่วนไหนต้องแก้ไข

ขอบพระคุณมากครับ


โค๊ด:
<style type="text/css">
div.imgthaifb img {
width: 257x;
height: auto;
}

div.imgthaifb {
width: 257px;
height: 140px;
overflow: hidden;
text-align: center;
border: 1px solid #000000;
-moz-box-shadow:inset 0 0 10px #edece6;
   -webkit-box-shadow:inset 0 0 10px #edece6;
   box-shadow:inset 0 0 10px #edece6;
}

<div class="imgthaifb"><img src="imgs/photo.jpg"></div>

 wanwan017 wanwan017
บันทึกการเข้า

HOW TO??
wasantec
หัวหน้าแก๊งเสียว
*

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

กระทู้: 2,613



ดูรายละเอียด
« ตอบ #1 เมื่อ: 06 สิงหาคม 2018, 09:01:30 »

กำหนด div ให้ width เป็น % ครับ เช่น width: 20%;
บันทึกการเข้า
ch0k
สมุนแก๊งเสียว
*

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

กระทู้: 711



ดูรายละเอียด
« ตอบ #2 เมื่อ: 06 สิงหาคม 2018, 09:15:16 »

div.imgthaifb img {
    max-width: 100%;
    height: auto;
}
บันทึกการเข้า

รับดูแลเว็บไซต์ ทำเว็บไซต์ ร้านค้าออนไลน์
WordPress + WooCommerce
ดูแลให้ทั้งระบบ, Google Analytics + Campaign Tracking พร้อมรายงานการวิเคราะห์
naitam
คนรักเสียว
*

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

กระทู้: 150



ดูรายละเอียด
« ตอบ #3 เมื่อ: 11 สิงหาคม 2018, 03:36:02 »

โค๊ด:

<style>
div.imgthaifb img {
width: 100%;
height: auto;
}

div.imgthaifb {
width: 257px;
height: 140px;
        Clear: left;
border: 1px solid #000000;
-moz-box-shadow:inset 0 0 10px #edece6;
   -webkit-box-shadow:inset 0 0 10px #edece6;
   box-shadow:inset 0 0 10px #edece6;
}

<div class="imgthaifb"><img src="imgs/photo.jpg" alt="ชื่อรูป"></div>

บันทึกการเข้า
killer777
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,009



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

ใช้ max-width ควบคู่กับ width ครับ รองรับบนมือถือด้วยครับ
บันทึกการเข้า

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