Question

有没有办法让这个叠加更具响应性？如何，使叠加不切断单词，或在分辨率变化时走出图像？

进一步澄清：根据我正在使用的W3CSS框架，我正在连续三个图像，其中有三个图像，等等。每个图像都有一个带有文本链接的覆盖图，指向其他页面，如下例所示。我唯一的问题是反应能力。因为我希望图像和叠加层能够响应屏幕尺寸的变化和分辨率。

谢谢！

＆＃13;

.container {
	position: relative;
	width: 50%;
}

.image {
	display: block;
	width: 100%;
	height: auto;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #008CBA;
}

.container:hover .overlay {
	opacity: 1;
}

.text {
	color: white;
	font-size: 15px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

＆＃13;

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>

<div class="w3-row-padding">
    <div class="w3-third w3-container w3-margin-bottom">
        <div class="container">
            <img src="https://www.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Google" style="height:300px;width:400px" class="w3-hover-opacity">
             <div class="overlay">
                <div class="text">
                    <a href="https://www.google.com">Google Sample1</a><br>
                    <a href="https://www.google.com">GoogleSample2</a><br>
                </div>
            </div>
        </div>
        <div class="w3-container w3-white" style="height:50px;width:400px">
            <h3>Example 1</h3>
        </div>
    </div>
</div>

＆＃13;

Answer 1

为确保您的image宽度与父级相同，您最好不仅使用width = 100%属性，还应使用min-width = 100%和max-width = 100%。如果您想保留image的尺寸，您也应指向height = auto，但在您的情况下，它应该是height = auto !important。为了打破overlay中的长词，我添加了以下规则：

overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
word-break: break-word;
hyphens: auto;

以下是工作片段：

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: auto !important;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
  
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div class="w3-row-padding">
  <div class="w3-third w3-container w3-margin-bottom">
    <div class="container">
      <img src="https://www.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Google" style="height:300px;width:400px" class="w3-hover-opacity image"></a>
      <div class="overlay">
        <div class="text">
          <a href="https://www.google.com">Google Sample1</a><br>
          <a href="https://www.google.com">GoogleSample2</a><br>
        </div>
      </div>
    </div>
    <div class="w3-container w3-white" style="height:50px;width:400px">
      <h3>Example 1</h3>
    </div>
</div>

Answer 2

背景大小：在响应式图像方面，封面是你的朋友。将图像作为背景，封面会将其定位，使其自动适合宽度/高度，并在不适合的另一个方向上调整大小以保持比例。这样，图像看起来总是保持相同的大小，但它的响应性并且不会失真。

.container {
position: relative;
width: 0%;
}
.w3-third{
background-image:url('http://www.fillmurray.com/200/300');
background-size:cover;
background-position:center center;
  height:300px;
  width:33.333%;
  float:left;
  display:block;
  position:relative;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}

.w3-container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
 }

<div class="w3-row-padding">
  <div class="w3-third w3-container w3-margin-bottom">
    <div class="overlay">
      <div class="text">
        <a href="https://www.google.com">Google Sample1</a><br>
        <a href="https://www.google.com">Google Sample2</a><br>
      </div>
    </div>
  </div>
  <div class="w3-third w3-container w3-margin-bottom">
    <div class="overlay">
      <div class="text">
        <a href="https://www.google.com">Google Sample1</a><br>
        <a href="https://www.google.com">Google Sample2</a><br>
      </div>
    </div>
  </div>
  <div class="w3-third w3-container w3-margin-bottom">
    <div class="overlay">
      <div class="text">
        <a href="https://www.google.com">Google Sample1</a><br>
        <a href="https://www.google.com">Google Sample2</a><br>
      </div>
    </div>
  </div>
</div>

使图像叠加更具响应性？

2 个答案: