放大表格中居中的图像

Question

我正在慢慢变得疯狂，这是肯定的。

对我的问题：我创建了一个表，并试图将单元格中的图像调整为单元格本身的完整宽度。 无论出于什么原因，这都不起作用。 我用手指搜索出汗的谷歌，没有解决方案。 从理论上讲，它们都应该具有。

这是代码：

 function scrollElmVert(el,num) { // to scroll up use a negative number var re=/html$/i; while(!re.test(el.tagName) && (1 > el.scrollTop)) el=el.parentNode; if(0 < el.scrollTop) el.scrollTop += num; } var acc = document.getElementsByClassName("accordion"); var i; var open = null; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { if (open == this) { open.classList.toggle("active"); open = null; } else { if (open != null) { open.classList.toggle("active"); } this.classList.toggle("active"); open = this; //Scroll to clicked element open.scrollIntoView(); scrollElmVert(open,-68); } }); } 

 .accordion { background-color: #fff; color: #444; cursor: pointer; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin: -5px; } /*Code commented to trouble shoot*/ .bg { width: 100%; } .active, .accordion:hover { background-color: #fff; } .panel { padding: 0 0px; display: none; width: 100%; background-color: white; overflow: hidden; } .accordion.active+div { display: block } .column { float: left; width: 50%; padding: 10px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } 

 <button class="accordion"> <div class="cat_text"> Cat 2 Placeholder </div> </button> <div class="panel"> <div class="row"> <div class="column" style="background-color:#aaa;text-align:center;position:relative;"> <img src="http://via.placeholder.com/165x555" style ="width:100%"> <p>Some text</p> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> </div> <div class="row"> <div class="column" style="background-color:#aaa;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> </div> </div> <button class="accordion"> <div class="cat_text"> Cat 3 Placeholder </div> </button> <div class="panel"> <p>Cat 3 Content</p> </div> <button class="accordion"> <div class="cat_text"> Cat 4 Placeholder </div> </button> <div class="panel"> <p>Cat 4 Content</p> </div> <button class="accordion"> <div class="cat_text"> Cat 5 Placeholder </div> </button> <div class="panel"> <p>Content 5</p> </div> 

Answer 1

如上代码所示，在父div上使用position:relative ，在图像上使用width:100% 。

position:relative使子元素相对于此元素具有空间量。 也就是说，它确保width:100%的子元素引用具有position:relative的元素的宽度。

 .column { float: left; width: 50%; padding: 10px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } 

 <div class="row"> <div class="column" style="background-color:#aaa;text-align:center; position:relative;"> <div class="img_enlarge_mobile"><img src="http://via.placeholder.com/165x550" style = 'width:100%'></div> <p>Some text..</p> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> </div> <div class="row"> <div class="column" style="background-color:#aaa;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> </div> 

Answer 2

只需将img#largeImage {width: 100%;}到CSS中即可。

 .column { float: left; width: 50%; padding: 10px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } img#largeImage { width: 100%; } 

 <div class="row"> <div class="column" style="background-color:#aaa;text-align:center;"> <div class="img_enlarge_mobile"><img id="largeImage" src="http://via.placeholder.com/165x550"></div> <p>Some text..</p> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> </div> <div class="row"> <div class="column" style="background-color:#aaa;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> </div> 

Answer 3

我不明白为什么有挑战性？

解

您只需要在img标签中添加width:100%即可。

要么

将此CSS代码添加到您的CSS

.img_enlarge_mobile img{
    width:100%;
}

更新OP的问题后

我制造了一个小提琴 。

 .column { float: left; width: 50%; padding: 10px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .img_enlarge_mobile img{ width:100%; } 

 <div class="row"> <div class="column" style="background-color:#aaa;text-align:center;"> <div class="img_enlarge_mobile"><img src="http://via.placeholder.com/165x550"></div> <p>Some text..</p> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> </div> <div class="row"> <div class="column" style="background-color:#aaa;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <p>Some text..</p> <p>Some text..</p> <p>Some text..</p> </div> </div>