|
หัวข้อ: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: kunnarakkup ที่ 20 กุมภาพันธ์ 2015, 16:38:19 คือผมจะให้รูปอยู่ในกรอบอะครับ รูปผมใส่ใน ul li แล้วทีนี้ ผมใช้ float:left รูปมันจะไม่อยู่ในกรอบอะครับ ผมเลยเปลี่ยนเป็น display:inline แทน แต่ตัวนี้พอผมย่อเว็บรูปตัวสุดท้ายมันไม่ขยับตามหน้าจออะครับ
โค้ดนี้อะครับ โค๊ด: <div class="frame"> โค๊ด: .frame{ border:1px solid #CCC; border-radius:5px; background-color:#FFF;}หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบ เริ่มหัวข้อโดย: Moukung ที่ 20 กุมภาพันธ์ 2015, 16:46:49 รอผู้รู้มาตอบ เก็บความรู้
หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบ เริ่มหัวข้อโดย: kunnarakkup ที่ 20 กุมภาพันธ์ 2015, 16:59:13 ขออีกอย่างครับ คือเว็บผมทำมือถืออะครับพอใส่รูปมันก็ต้องกำหนดเป็น width 100% ให้รูปย่อตามหน้าจอ แล้วที่นี้พอย่อตามหน้าจอรูปมันก็เล็กอีกมีวิธีแก้มั้ยครับให้รูปพอดูกับหน้าจอที่ย่อ แต่รูปยังเห็นชัดเหมือนเดิม
หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: ardencod3 ที่ 21 กุมภาพันธ์ 2015, 02:16:26 float:left มันจะทำให้ tag ไม่มี relation กับ tag ที่เป็น parent :wanwan020:
หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: simplify ที่ 21 กุมภาพันธ์ 2015, 02:55:28 ไม่รู้ใช่ที่ต้องการรึเปล่านะครับ ถ้าใช้ไม่ได้ขออภัยด้วยครับ
(http://www.uppic.org/image-7F1B_54E790B7.jpg) .frame{border:1px solid #CCC;border-radius:5px;background-color:#FFF;width:100%;height:300px} .frame ul{list-style:none;width:100%;height:100%;padding:0} .frame ul li{width:16%;float:left;margin:2px;border: 1px solid;text-align: center} .frame ul li img{width: 100%;padding:2px} หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: nociouz ที่ 21 กุมภาพันธ์ 2015, 07:23:54 ลอง table, th, td ไหมครับครับ :P
หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: kunnarakkup ที่ 23 กุมภาพันธ์ 2015, 08:44:09 ไม่รู้ใช่ที่ต้องการรึเปล่านะครับ ถ้าใช้ไม่ได้ขออภัยด้วยครับ ([url]http://www.uppic.org/image-7F1B_54E790B7.jpg[/url]) .frame{border:1px solid #CCC;border-radius:5px;background-color:#FFF;width:100%;height:300px} .frame ul{list-style:none;width:100%;height:100%;padding:0} .frame ul li{width:16%;float:left;margin:2px;border: 1px solid;text-align: center} .frame ul li img{width: 100%;padding:2px} แบบนี้มันก็ได้นะครับแต่มันต้องกำหนดความสูงเองอะครับ มันมีวิธีออโต้มั้ยอะครับ แบบถ้ารูปอยู่ในกรอบจริงเวลาย่อกรอบมันก็ต้องยืดตาม หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: MD.18 ที่ 23 กุมภาพันธ์ 2015, 11:37:10 ต้องถาม จขกท.ก่อนว่าจะทำอะไร ยังไง เอาให้ชัดเจนครับ หน้าจอใหญ่แสดงผลยังไง หน้าจอเล็กแสดงผลยังไง มันต้องวางแผนดีๆครับการทำ responsive
รูปที่อยู๋ในกรอบจะใส่รูปขนาดเท่าๆกันไว้หรือป่าว แล้วรูปอริจินัลใหญ่สุดขนาดเท่าไหร่เพราะมันก็ต้องกำหนด กว้าง100% สูง100% สำหรับรูปภาพครับ ส่วนกรอบข้างนอกเราต้องกำหนดกว้างเป็น % ส่วนสูงก็ต้องใส่ max-height min-height overflow:hidden แล้วก็กำหนด position ของรูปในกล่อง และใส่ inline-block เข้าไปที่กรอบรูปด้วยครับ แล้วก็เช็คมีเดียคิวรี่ให้เหมาะสม ไม่รู้ช่วยได้หรือป่าวนะ :wanwan004: หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: kunnarakkup ที่ 24 กุมภาพันธ์ 2015, 16:45:44 ต้องถาม จขกท.ก่อนว่าจะทำอะไร ยังไง เอาให้ชัดเจนครับ หน้าจอใหญ่แสดงผลยังไง หน้าจอเล็กแสดงผลยังไง มันต้องวางแผนดีๆครับการทำ responsive รูปที่อยู๋ในกรอบจะใส่รูปขนาดเท่าๆกันไว้หรือป่าว แล้วรูปอริจินัลใหญ่สุดขนาดเท่าไหร่เพราะมันก็ต้องกำหนด กว้าง100% สูง100% สำหรับรูปภาพครับ ส่วนกรอบข้างนอกเราต้องกำหนดกว้างเป็น % ส่วนสูงก็ต้องใส่ max-height min-height overflow:hidden แล้วก็กำหนด position ของรูปในกล่อง และใส่ inline-block เข้าไปที่กรอบรูปด้วยครับ แล้วก็เช็คมีเดียคิวรี่ให้เหมาะสม ไม่รู้ช่วยได้หรือป่าวนะ :wanwan004: รูปมันเป็นสินค้าอะครับ ผมไม่กำหนดให้มันหดตามหน้าจอครับ เดียวเห็นไม่ชัด หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: kunnarakkup ที่ 25 กุมภาพันธ์ 2015, 16:04:59 แก้ได้แล้วครับ ขอถามอีกนิดครับคือรูปมันอยู่ในกรอบ แล้วผมใช้คำสั่ง float:left; ให้ชิดซ้าย แล้วทีนี้พอย่อความกว้างหน้าจออะครับ ด้วยที่รูปปมันชิดซ้ายทำให้รูปมันไม่อย่ตรงกลางกรอบอะครับ กรอบด้านขวามันจะยืดหดแบบออโต้ แต่รูปอยู่ด้านซ้ายทำให้ดูไม่สมดุลอะครับ มีวิธีที่เวลาย่อความกว้างแล้ว ให้ซ้ายขวาเท่ากันมั้ยครับ
หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: kontammada-top ที่ 25 กุมภาพันธ์ 2015, 16:41:26 ผมใส่่ text-align: center; ไว้ที่ css ของกรอบ รูปด้านในก็อยู่ตรงกลางทั้งจอเดสท็อปและมือถือครับ ลองดูครับ
หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: kunnarakkup ที่ 25 กุมภาพันธ์ 2015, 21:28:27 ตอนนี้ลองหาข้อมูลดูเห็นว่าถ้าเขียน marginleft กับ right เป็น auto แล้วกำหนดเป็น display box อยู่จอยู่ตรงกลางอะครับ แต่ถ้าปรับเป็นแนวนอน มันก็ชิดซ้ายไม่กลางอะ มีวิธีแก้มั้ยอะครับ
หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: metha_design ที่ 25 กุมภาพันธ์ 2015, 21:36:38 ไม่รู้ใช่ที่ต้องการรึเปล่านะครับ ถ้าใช้ไม่ได้ขออภัยด้วยครับ ([url]http://www.uppic.org/image-7F1B_54E790B7.jpg[/url]) .frame{border:1px solid #CCC;border-radius:5px;background-color:#FFF;width:100%;height:300px} .frame ul{list-style:none;width:100%;height:100%;padding:0} .frame ul li{width:16%;float:left;margin:2px;border: 1px solid;text-align: center} .frame ul li img{width: 100%;padding:2px} แบบนี้มันก็ได้นะครับแต่มันต้องกำหนดความสูงเองอะครับ มันมีวิธีออโต้มั้ยอะครับ แบบถ้ารูปอยู่ในกรอบจริงเวลาย่อกรอบมันก็ต้องยืดตาม หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: simplify ที่ 25 กุมภาพันธ์ 2015, 21:57:13 (http://www.uppic.org/image-09EC_54EDE13F.jpg)
ต้องการให้แสดงผลแบบนี้รึเปล่าครับ ไม่แน่ใจ (ซ้ายรูปเต็ม) ถ้าใช่ก็ สมมุติกรอบนอกเป็น <a class=""><img src""/></a> กำหนดความสูงให้กรอบนอก ตัวอย่างนะครับ height: 250px;overflow: hidden;display: block; แล้ว img กำหนดเป็น max-width: 100%;height: auto; รูปที่ได้จะเต็มตามความกว้าง แต่ส่วนสูงจะไม่เต็มรูป ลองปรับ ๆ ดูนะครับ ถ้าไม่ใช่ต้องขออภัยด้วย ปล.อย่าอ่านเนื้อหานะ ผมกำลังแก้บล็อกเนื้อหาเลยมั่ว ๆ ครับ :P หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: kunnarakkup ที่ 25 กุมภาพันธ์ 2015, 22:39:41 จะทำแบบนี้อะครับ คือมีกรอบนอก แล้วรู)อยู่ในกรอบ รูปใส่ในtag ul li ครับ แล้วจะให้รูปอยู่กลางกรอบอะครับ เวลาย่อหดหน้าจอ
(http://upload.siamza.com/file_upload/modify/250215/1789402.png) (http://upload.siamza.com/1789402) หัวข้อ: Re: ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง เริ่มหัวข้อโดย: kunnarakkup ที่ 25 กุมภาพันธ์ 2015, 22:52:10 แก้ได้ละครับ แบบนี้จะดีมั้ยครับ เปลี่ยนจาก ul เป็น tableแทน ผมรู้สึกว่าถ้าบนมือถือต้องใช้ displaybox มันจะได้รูปแนวตั้งแถวเดียว ถ้าอยู่บนแท็บเล็ตจะน่าเกลียดมั้ยอะครับ อยากให้เป็นแนวตั้ง 2แถว
<style> .x{ border:1px #000000 solid;} td{ margin-left:20px;} table td{ padding-left:20px; padding-bottom:10px; padding-right:20px;} </style> ------ <body> <div class="x"> <table align="center"> <tr> <td class="c"><img src="xx" /></td> <td class="c"><img src="xx" /></td> <td class="c"><img src="xx" /></td> </tr> <tr> <td class="c"><img src="xx" /></td> <td class="c"><img src="xx" /></td> <td class="c"><img src="xx" /></td> </tr> <tr> <td class="c"><img src="xx" /></td> <td class="c"><img src="xx" /></td> <td class="c"><img src="xx" /></td> </tr> </table> </div> </body> |