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

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

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

กระทู้: 151



ดูรายละเอียด
« เมื่อ: 21 พฤศจิกายน 2016, 10:06:52 »
มีวิธีใหนที่จะทำให้ภาพไม่บีบลง ให้ครอบตัดแทนเพื่อไม่ให้เสียเอกลักษณ์ของภาพบ้างครับ



อยากให้เป็นแบบนี้ครับ
« แก้ไขครั้งสุดท้าย: 25 พฤศจิกายน 2016, 08:30:35 โดย pornchai_vigo » บันทึกการเข้า
@Roverpost
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,816



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 21 พฤศจิกายน 2016, 10:13:49 »
1. รูปภาพตอนที่คุณอัพโหลด คุณได้ปรับขนาดรูปภาพ ให้พอดีกับขนาดของตัวอย่างเขาหรือไม่
2. จำนวนหน้า ถ้าเพิ้มสินค้าเข้าไปอีก เรื่อยๆ จำนวนหน้าจะเพิ่มขึ้นเรื่อยๆนะครับ
บันทึกการเข้า
Shibot โปรแกรมแชทบอท พร้อมระบบไลฟ์สด ที่สามารถเพิ่มยอดขายได้จริง
pornchai_vigo
คนรักเสียว
*

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

กระทู้: 151



ดูรายละเอียด
« ตอบ #2 เมื่อ: 21 พฤศจิกายน 2016, 11:02:34 »
อ้างจาก: @Roverpost ที่ 21 พฤศจิกายน 2016, 10:13:49
1. รูปภาพตอนที่คุณอัพโหลด คุณได้ปรับขนาดรูปภาพ ให้พอดีกับขนาดของตัวอย่างเขาหรือไม่
2. จำนวนหน้า ถ้าเพิ้มสินค้าเข้าไปอีก เรื่อยๆ จำนวนหน้าจะเพิ่มขึ้นเรื่อยๆนะครับ

บทความ 1,000 กว่าครับ หน้าละ 10 บทความมันต้องโชว์ 100 กว่าหน้านะครับ
ภาพปรับทุกขนาดแล้วครับยังเหมือนเดิม
บันทึกการเข้า
@Roverpost
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,816



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 21 พฤศจิกายน 2016, 11:07:03 »
อ้างจาก: pornchai_vigo ที่ 21 พฤศจิกายน 2016, 11:02:34
อ้างจาก: @Roverpost ที่ 21 พฤศจิกายน 2016, 10:13:49
1. รูปภาพตอนที่คุณอัพโหลด คุณได้ปรับขนาดรูปภาพ ให้พอดีกับขนาดของตัวอย่างเขาหรือไม่
2. จำนวนหน้า ถ้าเพิ้มสินค้าเข้าไปอีก เรื่อยๆ จำนวนหน้าจะเพิ่มขึ้นเรื่อยๆนะครับ

บทความ 1,000 กว่าครับ หน้าละ 10 บทความมันต้องโชว์ 100 กว่าหน้านะครับ
ภาพปรับทุกขนาดแล้วครับยังเหมือนเดิม

ถ้าเช็คชัวร์แล้ว ลองติดต่อกับผู้ขายดูนะครับ แจ้งปัญหาให้เค้าทราบดู
บันทึกการเข้า
Shibot โปรแกรมแชทบอท พร้อมระบบไลฟ์สด ที่สามารถเพิ่มยอดขายได้จริง
pornchai_vigo
คนรักเสียว
*

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

กระทู้: 151



ดูรายละเอียด
« ตอบ #4 เมื่อ: 21 พฤศจิกายน 2016, 11:44:54 »
มีวิธีใหนที่จะทำให้ภาพไม่บีบลง ให้ครอบตัดแทนเพื่อไม่ให้เสียเอกลักษณ์ของภาพบ้างครับ




อยากให้เป็นแบบนี้ครับ
« แก้ไขครั้งสุดท้าย: 24 พฤศจิกายน 2016, 21:11:18 โดย pornchai_vigo » บันทึกการเข้า
pornchai_vigo
คนรักเสียว
*

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

กระทู้: 151



ดูรายละเอียด
« ตอบ #5 เมื่อ: 25 พฤศจิกายน 2016, 21:15:55 »
dun dun dun  wanwan011
บันทึกการเข้า
Fallen
หัวหน้าแก๊งเสียว
*

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

กระทู้: 2,751



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 26 พฤศจิกายน 2016, 08:50:55 »
ขนาดของภาพ กว้าง และ ยาวไม่สัมพันธ์กัน
ไปดูรุปเดิมที่เขามี หรือ ขนาดที่เขากำหนดไว้
เเล้วปรับให้มันสัมพันธ์กัน (กว้างxยาว)
เช่น เดิม 100x100
ของใหม่ต้องได้สัดส่วนเดียวกัน อาจจะเป็น 120x120 ก็ว่าไป
บันทึกการเข้า
ประกันภัย
ประกันรถยนต์ พรบ มอเตอร์ไซต์ ราคาสมาชิก
..
pond_z1000
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,325



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 26 พฤศจิกายน 2016, 08:58:26 »
จากรูปน่าจะโดน css img บังคับขนาดภาพแบบ fix ตายตัวครับ ปกติถ้าใช้ width เฉยๆ ให้ hight เป็น auto จะได้ความกว้างของภาพ ส่วนความสูง มันจะปล่อยตามขนาดจริง แต่ถ้าต้องการ crop ภาพ ศึกษาจากนี่นะคับจะเข้าใจง่ายกว่า
1. http://stackoverflow.com/quest...y-an-image-resized-and-cropped
2. http://jonathannicol.com/blog/...ntre-crop-thumbnails-with-css/
3. http://www.w3schools.com/cssref/pr_pos_clip.asp

เลือกเอาเลยครับ
บันทึกการเข้า
bigbike , ก๋วยจั๊บ ,  ทำนายฝัน , มอเตอร์ไซค์ , อนิเมะซับไทย
thaiserver
คนรักเสียว
*

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

กระทู้: 146



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 26 พฤศจิกายน 2016, 09:00:38 »
ปรับ css ครับ แบบ auto HxW = 100%
บันทึกการเข้า
ผ้าพันคอ
สินค้าพรีเมี่ยม
จักรยานไฟฟ้า, สกู๊ตเตอร์ไฟฟ้า
codernu
Newbie
*

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

กระทู้: 21



ดูรายละเอียด
« ตอบ #9 เมื่อ: 26 พฤศจิกายน 2016, 09:11:10 »
ปกติลักษณะนี้อาจจะเกิดจากการที่มีการระบุขนาดภาพ (กว้าง*สูง) บน HTML หรือ CSS ที่ไม่ใช่ขนาดของภาพ
เราสามารถแก้ไขได้โดยการกำหนดให้ ความกว้าง หรือความสูงอัติโนมัติ หรือ auto นั้นเองครับ
ส่วนใหญ่จะนิยมกำหนด max-width แล้วให้ height เป็นแบบ auto ครับ และหากท่าน จขกท.
ต้องการแสดงในรูปแบบ crop ก็สามารถทำได้ครับ แต่ต้องเป็นการกำหนดให้รูปภาพแสดงเป็น background ครับ

ผมลองเขียนให้ดูเป็นตัวอย่างครับ ลองเอาไปปรับใช้ดูครับ
https://jsfiddle.net/xtquy99g/4/

 wanwan003 wanwan003
บันทึกการเข้า
เราจะรวยไปด้วยกัน @__@
pornchai_vigo
คนรักเสียว
*

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

กระทู้: 151



ดูรายละเอียด
« ตอบ #10 เมื่อ: 26 พฤศจิกายน 2016, 10:03:56 »
ขอบคุณทุกท่านมากครับอยาก+1 แต่ยังทำไม่ได้  wanwan017
บันทึกการเข้า
natthakon
ก๊วนเสียว
*

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

กระทู้: 263



ดูรายละเอียด เว็บไซต์
« ตอบ #11 เมื่อ: 26 พฤศจิกายน 2016, 10:54:59 »
เว็ปท่านทำด้วย Blogger
ใช้ธีม Palki Ultimate โดย http:www.msdesignbd.com

ขนาดภาพที่พอดี คือ 300x200 px

ส่วนวิธีปรับให้ครอบตัดแทน ยังทำไม่ได้เลยครับ  Tongue
บันทึกการเข้า
saiintz
คนรักเสียว
*

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

กระทู้: 127



ดูรายละเอียด เว็บไซต์
« ตอบ #12 เมื่อ: 26 พฤศจิกายน 2016, 11:19:17 »
ขอเข้ามาชมด้วยคนครับ
บันทึกการเข้า
ฟิล์มกระจก
เคสโทรศัพท์
skp123
Newbie
*

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

กระทู้: 12



ดูรายละเอียด
« ตอบ #13 เมื่อ: 26 พฤศจิกายน 2016, 12:43:20 »
ประมาณนี้มั้ย
https://jsfiddle.net/6o2ecu10/
บันทึกการเข้า
pornchai_vigo
คนรักเสียว
*

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

กระทู้: 151



ดูรายละเอียด
« ตอบ #14 เมื่อ: 26 พฤศจิกายน 2016, 21:17:14 »
อ้างจาก: natthakon ที่ 26 พฤศจิกายน 2016, 10:54:59
เว็ปท่านทำด้วย Blogger
ใช้ธีม Palki Ultimate โดย http:www.msdesignbd.com

ขนาดภาพที่พอดี คือ 300x200 px

ส่วนวิธีปรับให้ครอบตัดแทน ยังทำไม่ได้เลยครับ  Tongue

ใช่ครับ ผมขอให้เขาแก้ให้ เขาบอกให้เราอัพภาพที่พอดี แบบนี้ถ้าเราเอาภาพใหญ่ๆมาใส่ก็ไม่ได้นะสิ ถ้าไม่ติดตรงที่ซื้อมาผมไม่ใช้แล้วธีมนี้  Lips Sealed
บันทึกการเข้า
pornchai_vigo
คนรักเสียว
*

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

กระทู้: 151



ดูรายละเอียด
« ตอบ #15 เมื่อ: 26 พฤศจิกายน 2016, 21:19:18 »
อ้างจาก: skp123 ที่ 26 พฤศจิกายน 2016, 12:43:20
ประมาณนี้มั้ย
https://jsfiddle.net/6o2ecu10/

ใช่ครับอยากให้เป็นแบบนี้เลย แต่เราจะเอาโค้ดไปใส่ตรงใหน ลบของเดิมยังงัย ผมเพิ่งหัดทำนะครับ
บันทึกการเข้า
skp123
Newbie
*

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

กระทู้: 12



ดูรายละเอียด
« ตอบ #16 เมื่อ: 27 พฤศจิกายน 2016, 10:53:47 »
ไปดูหน้าตัวอย่างธีมมาละ
ลอง override css ดู โดยเติม code นี้ใน tag <head> นะ
โค๊ด:
<style>
.format-image.hentry.post-image.post-format-image {
	position: relative !important;
	overflow: hidden !important;
	width: 300px !important;
	height: 200px !important;
}
.format-image.hentry.post-image.post-format-image > a > img {
	position: absolute !important;
	margin: auto !important;
	height: auto !important;
	width: 100% !important;
	left: -100% !important;
	right: -100% !important;
	top: -100% !important;
	bottom: -100% !important;
}
@media only screen and (max-width:480px) {
	.format-image.hentry.post-image.post-format-image {
		margin: 0 !important;
		width: 100% !important;
		height: 160px !important;
	}
}
</style>

ถ้ามันแสดงผลผิดปกติหรือกระทบส่วนอื่นก็มาลบส่วนที่เติมออกนะ Tongue

ปล. ถ้าแก้แล้วยังไงลองดูในมือถือด้วยนะ ว่ามัน responsive อยู่มั้ย
ปล2. การแก้แบบนี้ไม่ถูกจุดนัก ถ้าเป็นไปได้ลองหาธีมใหม่ดีกว่า
« แก้ไขครั้งสุดท้าย: 27 พฤศจิกายน 2016, 12:01:52 โดย skp123 » บันทึกการเข้า
pornchai_vigo
คนรักเสียว
*

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

กระทู้: 151



ดูรายละเอียด
« ตอบ #17 เมื่อ: 27 พฤศจิกายน 2016, 16:03:42 »
อ้างจาก: skp123 ที่ 27 พฤศจิกายน 2016, 10:53:47
ไปดูหน้าตัวอย่างธีมมาละ
ลอง override css ดู โดยเติม code นี้ใน tag <head> นะ
โค๊ด:
<style>
.format-image.hentry.post-image.post-format-image {
	position: relative !important;
	overflow: hidden !important;
	width: 300px !important;
	height: 200px !important;
}
.format-image.hentry.post-image.post-format-image > a > img {
	position: absolute !important;
	margin: auto !important;
	height: auto !important;
	width: 100% !important;
	left: -100% !important;
	right: -100% !important;
	top: -100% !important;
	bottom: -100% !important;
}
@media only screen and (max-width:480px) {
	.format-image.hentry.post-image.post-format-image {
		margin: 0 !important;
		width: 100% !important;
		height: 160px !important;
	}
}
</style>

ถ้ามันแสดงผลผิดปกติหรือกระทบส่วนอื่นก็มาลบส่วนที่เติมออกนะ Tongue

ปล. ถ้าแก้แล้วยังไงลองดูในมือถือด้วยนะ ว่ามัน responsive อยู่มั้ย
ปล2. การแก้แบบนี้ไม่ถูกจุดนัก ถ้าเป็นไปได้ลองหาธีมใหม่ดีกว่า



วิธี้นี้ผลออกมาแบบนี้ครับ



แต่วิธีที่ผมแก้ก่อนหน้าได้แบบนี้ครับ คิดว่าแบบใหนสวยกว่ากันครับ
บันทึกการเข้า
skp123
Newbie
*

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

กระทู้: 12



ดูรายละเอียด
« ตอบ #18 เมื่อ: 28 พฤศจิกายน 2016, 07:04:05 »
ลองใหม่ ใส่แค่แบบนี้สิ
โค๊ด:
<style>
.format-image.hentry.post-image.post-format-image > a > img {
	max-width: 300px !important;
	max-height: 200px !important;
        height: auto !important;
        width: auto !important;
}
</style>
บันทึกการเข้า
pornchai_vigo
คนรักเสียว
*

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

กระทู้: 151



ดูรายละเอียด
« ตอบ #19 เมื่อ: 28 พฤศจิกายน 2016, 22:48:40 »
อ้างจาก: skp123 ที่ 28 พฤศจิกายน 2016, 07:04:05
ลองใหม่ ใส่แค่แบบนี้สิ
โค๊ด:
<style>
.format-image.hentry.post-image.post-format-image > a > img {
	max-width: 300px !important;
	max-height: 200px !important;
        height: auto !important;
        width: auto !important;
}
</style>


ได้แบบนี้ครับ
บันทึกการเข้า
sputtaro
สมุนแก๊งเสียว
*

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

กระทู้: 910



ดูรายละเอียด
« ตอบ #20 เมื่อ: 28 พฤศจิกายน 2016, 22:58:35 »
ลองแบบนี้ดูครับ
<style>
   .format-image.hentry.post-image.post-format-image > a > img {
   max-width: 300px !important;
   max-height: 200px !important;
        height: auto !important;
        width: auto !important;
   display: block;
   position: relative;
   object-fit:contain;
}
</style>

ประเด็นที่ผมแนะนำให้เพิ่ม คือ
display: block;
position: relative;
object-fit:contain;

********************
ปกติ ผมจะใช้ประมาณนี้ครับ
width: 260px;
height: 260px;
display: block;
position: relative;
object-fit:contain;

เพื่อบังคับให้ภาพมีขนาด 260x260 เสมอ

*************************

ลองดูเกี่ยวกับ  object-fit:contain
เผื่อแก้ไขเพิ่มเติม หรือ ทดสอบดูครับ

หรือ ลองดูแนวจากตัวอย่างนี้ครับ
https://www.sitepoint.com/usin...it-object-position-properties/

เผื่อที่ผมแนะนำไม่ตรงกับที่ต้องการ
สามารถเปลี่ยนจาก contain เป็น
    fill
    contain
    cover
    none
    scale-down
 เพื่อทดสอบดู

****************

ตามเจตนาของท่าน cover น่าจะตรงมากกว่า contain ครับ
« แก้ไขครั้งสุดท้าย: 28 พฤศจิกายน 2016, 23:28:01 โดย sputtaro » บันทึกการเข้า
pornchai_vigo
คนรักเสียว
*

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

กระทู้: 151



ดูรายละเอียด
« ตอบ #21 เมื่อ: 29 พฤศจิกายน 2016, 00:11:52 »
แก้ไปแก้มาได้ล่ะครับ แต่ติดตรงที่ภาพไม่ชัด   wanwan003Tongue



เปรียบเทียบแบบเก่าๆ
บันทึกการเข้า
pornchai_vigo
คนรักเสียว
*

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

กระทู้: 151



ดูรายละเอียด
« ตอบ #22 เมื่อ: 30 พฤศจิกายน 2016, 11:10:28 »
อ้างจาก: sputtaro ที่ 28 พฤศจิกายน 2016, 22:58:35
ลองแบบนี้ดูครับ
<style>
   .format-image.hentry.post-image.post-format-image > a > img {
   max-width: 300px !important;
   max-height: 200px !important;
        height: auto !important;
        width: auto !important;
   display: block;
   position: relative;
   object-fit:contain;
}
</style>

ประเด็นที่ผมแนะนำให้เพิ่ม คือ
display: block;
position: relative;
object-fit:contain;

********************
ปกติ ผมจะใช้ประมาณนี้ครับ
width: 260px;
height: 260px;
display: block;
position: relative;
object-fit:contain;

เพื่อบังคับให้ภาพมีขนาด 260x260 เสมอ

*************************

ลองดูเกี่ยวกับ  object-fit:contain
เผื่อแก้ไขเพิ่มเติม หรือ ทดสอบดูครับ

หรือ ลองดูแนวจากตัวอย่างนี้ครับ
https://www.sitepoint.com/usin...it-object-position-properties/

เผื่อที่ผมแนะนำไม่ตรงกับที่ต้องการ
สามารถเปลี่ยนจาก contain เป็น
    fill
    contain
    cover
    none
    scale-down
 เพื่อทดสอบดู

****************

ตามเจตนาของท่าน cover น่าจะตรงมากกว่า contain ครับ


ใช่ครับผมใช้ cover ได้ตามที่ต้องการเลยครับ ขอบคุณมาก แต่ภาพไม่ชัดถ้าจะให้ชัดต้องปรับภาพ
max-width: 200px !important;
max-height: 200px !important;
แต่ภาพมันจะเล็กลง
« แก้ไขครั้งสุดท้าย: 30 พฤศจิกายน 2016, 11:17:25 โดย pornchai_vigo » บันทึกการเข้า
หน้า: 1 2 [ทั้งหมด]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: