ช่วยหน่อยครับ เอารูปอยู่ในกรอบยังไง

[kunnarakkup]

คือผมจะให้รูปอยู่ในกรอบอะครับ รูปผมใส่ใน ul li แล้วทีนี้ ผมใช้ float:left รูปมันจะไม่อยู่ในกรอบอะครับ ผมเลยเปลี่ยนเป็น display:inline แทน แต่ตัวนี้พอผมย่อเว็บรูปตัวสุดท้ายมันไม่ขยับตามหน้าจออะครับ
โค้ดนี้อะครับ

โค้ด เลือก ขยาย

<div class="frame">
<ul class="br-frame">
<li><img src="../../../Users/PC/Desktop/New folder/b1.png" class="img-frame"></li>
<li><img src="../../../Users/PC/Desktop/New folder/b1.png" class="img-frame"></li>
<li><img src="../../../Users/PC/Desktop/New folder/b1.png" class="img-frame"></li>
<li><img src="../../../Users/PC/Desktop/New folder/b1.png" class="img-frame"></li>
<li><img src="../../../Users/PC/Desktop/New folder/b1.png" class="img-frame"></li>
<li><img src="../../../Users/PC/Desktop/New folder/b1.png" class="img-frame"></li>

</ul>
</div>

โค้ด เลือก ขยาย

.frame{ border:1px solid #CCC; border-radius:5px; background-color:#FFF;}
.br-frame{ list-style:none;}
.br-frame li{ float:left; }

[Moukung]

รอผู้รู้มาตอบ เก็บความรู้

[kunnarakkup]

ขออีกอย่างครับ คือเว็บผมทำมือถืออะครับพอใส่รูปมันก็ต้องกำหนดเป็น width 100% ให้รูปย่อตามหน้าจอ แล้วที่นี้พอย่อตามหน้าจอรูปมันก็เล็กอีกมีวิธีแก้มั้ยครับให้รูปพอดูกับหน้าจอที่ย่อ แต่รูปยังเห็นชัดเหมือนเดิม

[ardencod3]

 float:left มันจะทำให้ tag ไม่มี relation กับ tag ที่เป็น parent 

[simplify]

ไม่รู้ใช่ที่ต้องการรึเปล่านะครับ ถ้าใช้ไม่ได้ขออภัยด้วยครับ



.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}

[nociouz]

ลอง table, th, td ไหมครับครับ

[kunnarakkup]

ไม่รู้ใช่ที่ต้องการรึเปล่านะครับ ถ้าใช้ไม่ได้ขออภัยด้วยครับ



.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}

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

[MD.18]

ต้องถาม จขกท.ก่อนว่าจะทำอะไร ยังไง เอาให้ชัดเจนครับ หน้าจอใหญ่แสดงผลยังไง หน้าจอเล็กแสดงผลยังไง มันต้องวางแผนดีๆครับการทำ responsive

รูปที่อยู๋ในกรอบจะใส่รูปขนาดเท่าๆกันไว้หรือป่าว แล้วรูปอริจินัลใหญ่สุดขนาดเท่าไหร่เพราะมันก็ต้องกำหนด กว้าง100% สูง100% สำหรับรูปภาพครับ
ส่วนกรอบข้างนอกเราต้องกำหนดกว้างเป็น % ส่วนสูงก็ต้องใส่ max-height min-height overflow:hidden แล้วก็กำหนด position ของรูปในกล่อง
และใส่ inline-block เข้าไปที่กรอบรูปด้วยครับ
แล้วก็เช็คมีเดียคิวรี่ให้เหมาะสม


ไม่รู้ช่วยได้หรือป่าวนะ 

[kunnarakkup]

ต้องถาม จขกท.ก่อนว่าจะทำอะไร ยังไง เอาให้ชัดเจนครับ หน้าจอใหญ่แสดงผลยังไง หน้าจอเล็กแสดงผลยังไง มันต้องวางแผนดีๆครับการทำ responsive

รูปที่อยู๋ในกรอบจะใส่รูปขนาดเท่าๆกันไว้หรือป่าว แล้วรูปอริจินัลใหญ่สุดขนาดเท่าไหร่เพราะมันก็ต้องกำหนด กว้าง100% สูง100% สำหรับรูปภาพครับ
ส่วนกรอบข้างนอกเราต้องกำหนดกว้างเป็น % ส่วนสูงก็ต้องใส่ max-height min-height overflow:hidden แล้วก็กำหนด position ของรูปในกล่อง
และใส่ inline-block เข้าไปที่กรอบรูปด้วยครับ
แล้วก็เช็คมีเดียคิวรี่ให้เหมาะสม


ไม่รู้ช่วยได้หรือป่าวนะ 

รูปมันเป็นสินค้าอะครับ ผมไม่กำหนดให้มันหดตามหน้าจอครับ เดียวเห็นไม่ชัด

[kunnarakkup]

แก้ได้แล้วครับ ขอถามอีกนิดครับคือรูปมันอยู่ในกรอบ แล้วผมใช้คำสั่ง float:left; ให้ชิดซ้าย แล้วทีนี้พอย่อความกว้างหน้าจออะครับ  ด้วยที่รูปปมันชิดซ้ายทำให้รูปมันไม่อย่ตรงกลางกรอบอะครับ กรอบด้านขวามันจะยืดหดแบบออโต้ แต่รูปอยู่ด้านซ้ายทำให้ดูไม่สมดุลอะครับ มีวิธีที่เวลาย่อความกว้างแล้ว ให้ซ้ายขวาเท่ากันมั้ยครับ 

[kontammada-top]

ผมใส่่ text-align: center; ไว้ที่ css ของกรอบ รูปด้านในก็อยู่ตรงกลางทั้งจอเดสท็อปและมือถือครับ ลองดูครับ

[kunnarakkup]

ตอนนี้ลองหาข้อมูลดูเห็นว่าถ้าเขียน marginleft กับ right เป็น auto แล้วกำหนดเป็น display box อยู่จอยู่ตรงกลางอะครับ แต่ถ้าปรับเป็นแนวนอน มันก็ชิดซ้ายไม่กลางอะ มีวิธีแก้มั้ยอะครับ

[metha_design]

ไม่รู้ใช่ที่ต้องการรึเปล่านะครับ ถ้าใช้ไม่ได้ขออภัยด้วยครับ



.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}

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

[simplify]

ต้องการให้แสดงผลแบบนี้รึเปล่าครับ ไม่แน่ใจ (ซ้ายรูปเต็ม) ถ้าใช่ก็
สมมุติกรอบนอกเป็น <a class=""><img src""/></a>
กำหนดความสูงให้กรอบนอก ตัวอย่างนะครับ height: 250px;overflow: hidden;display: block;
แล้ว img กำหนดเป็น max-width: 100%;height: auto; รูปที่ได้จะเต็มตามความกว้าง แต่ส่วนสูงจะไม่เต็มรูป

ลองปรับ ๆ ดูนะครับ ถ้าไม่ใช่ต้องขออภัยด้วย

ปล.อย่าอ่านเนื้อหานะ ผมกำลังแก้บล็อกเนื้อหาเลยมั่ว ๆ ครับ 

[kunnarakkup]

จะทำแบบนี้อะครับ คือมีกรอบนอก แล้วรู)อยู่ในกรอบ รูปใส่ในtag ul li ครับ แล้วจะให้รูปอยู่กลางกรอบอะครับ เวลาย่อหดหน้าจอ

[kunnarakkup]

แก้ได้ละครับ แบบนี้จะดีมั้ยครับ เปลี่ยนจาก 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>