Question

我的内部div有一个背景图像，当你将鼠标悬停在它上面而不会改变div的高度和宽度时，它应该放大。我已经接近但仍然没有内部div没有填满outder-div的全部高度。除非你将鼠标悬停在它上面，否则背景图像会填充外部div的整个高度。这是因为溢出：隐藏我用我猜。任何人都知道如何解决这个问题？

这是我的HTML和CSS：

＆＃13;

<div id="work" class="container border-bottom">
  <h1>My work</h1>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port1">
      <h3>test</h3>
      <p>Website x</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port2">
      <h3>test</h3>
      <p>project y</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port3">
      <h3>test</h3>
      <p>Webapplicatie x</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port4">
      <h3>test</h3>
      <p>Website y</p>
    </div>
  </div>
</div>

＆＃13;

package Xcel;

import java.io.FileInputStream;
import java.io.IOException;

import org.apache.poi.EncryptedDocumentException;
import org.apache.poi.openxml4j.exceptions.InvalidFormatException;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.poi.ss.usermodel.WorkbookFactory;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class NewTest {
  @Test
  public void f() throws EncryptedDocumentException, InvalidFormatException, IOException 
  {
      System.setProperty("webdriver.chrome.driver", "E:\\New Folder\\chromedriver.exe");
      WebDriver driver = new ChromeDriver();

      driver.get("http://127.0.0.1/login.do");

      String un = NewTest.afterMethod(1, 0);

      driver.findElement(By.name("username")).sendKeys(un);

      String ur = NewTest.afterMethod(1, 1);

      driver.findElement(By.name("pwd")).sendKeys(ur);

      driver.findElement(By.xpath("//input[@type='submit']")).click();



  }

 public static String afterMethod(int r, int c) throwsEncryptedDocumentException, InvalidFormatException, IOException 
  {
      FileInputStream fis = new FileInputStream("‪E:\\Test\\Book1.xlsx");

      Workbook Wb = WorkbookFactory.create(fis);

      String s1 = Wb.getSheet("Test1").getRow(r).getCell(c).getStringCellValue();

      return s1;
  }


}

＆＃13;

Answer 1

您正在目睹的案例，这是一种预期的行为。

意味着.inner-div > h3的上边距成为.inner-div的上边距，.inner-div > p的下边距再次成为.inner-div的下边距。

显然，你没有想到这一点，但幸运的是，保证金崩溃受到一系列条件的限制。

确保边距不会崩溃的其中一种方法是在参与父级的子元素（在您的案例中为overflow）中指定visible而不是.inner-div - 边缘折叠行为：

.inner-div {
    overflow: auto; /* Or 'hidden', depending on your preferences. */
}

Answer 2

你在找这个吗？

＆＃13;

.outer-div {
  overflow: hidden;
}

.inner-div {
  padding: 0px;
  margin: 0px;
  height: 100%;
}

#port1 {
  height: 100%;
  width: 100%;
  background-size: 100%;
  background-position: center;
  transition: background-size 0.5s ease;
  background-image: url(https://dummyimage.com/600x400/ccc/fff&text=image);
}

#port1.inner-div:hover {
  /*transform: scale(1.2);*/
  background-size: 120%;
}

＆＃13;

<div id="work" class="container border-bottom">
  <h1>My work</h1>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port1">
      <h3>test</h3>
      <p>Website x</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port2">
      <h3>test</h3>
      <p>project y</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port3">
      <h3>test</h3>
      <p>Webapplicatie x</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port4">
      <h3>test</h3>
      <p>Website y</p>
    </div>
  </div>
</div>

＆＃13;

隐藏的溢出不会填满整个高度

2 个答案: