Question

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

对于我的问题：我创建了一个表，我试图将单元格内的图像调整到单元格本身的整个宽度。无论出于何种原因，这都行不通。我用google搜索我的手指，没有解决方案。从理论上讲，他们都应该有。

以下是代码：

＆＃13;

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);
    }
  });
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

在图片上的父position:relative和div上使用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

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

解决方案

您只需将width:100%添加到img标记。

或

将此CSS代码添加到CSS

.img_enlarge_mobile img{ width:100%; }

更新OP的问题后

我创建了一个fiddle。

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

放大表格中的中心图像

3 个答案: