Question

我有一个网页，其中包含三张带有重叠文字的图片；问题是页面没有响应
我尝试使用@media规则将图像的宽度设置为100％，但是它不起作用。我还尝试将图像的最大宽度设置为100％，将高度设置为自动，但这会影响覆盖文字。关于如何使图像具有响应性而又不影响覆盖文字的任何想法。

<div class="image">
<img 
 src="//cdn.shopify.com/s/files/1/0254/5067/6317/files/smart_large.jpg? 
 v=1562170226" width="1179" height="480" alt="Alt text">
<div class="left">
<h2 class="right"><span>text goes here</span></h2>
</div>
</div>

.image { 
 position: relative; 
   width: 100%; 
}

h2{ 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

.h2:nth-of-type(2){
   position: absolute; 
   bottom: 200px; 
   left: 200px; 
   width: 100%;
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}


/* Main container */
.overlay-image {
 position: relative;

}
/* Original image */
.overlay-image .image {
 display: block;

}
/* Original text overlay */
.overlay-image .text {
 color: #81282A;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}


/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}

.overlay-image:hover .hover {
 opacity: 1;
}



.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0,0,0,0.8);
}

.pp{
color: white;
}



.TEXT{
position: relative;
width: 831px;
height: 134px;
left: 180px;
top: 56px;
padding-top: 10px;
margin-bottom: 15%;

font-style: normal;
font-weight: 300;
font-size: 35px;
line-height: 47px;
text-align: center;
color: black;
}
div.image {
  display: inline-block;
  width: auto;
}

h2.right {
  right: 0px;
  left: auto;
  width: auto;
}

Answer 1

如果要响应图像，则只需执行以下操作：

.image {
  max-width: 100%;
  height: auto;
}

并将该类放在img标签上。

https://codepen.io/ilazycoder/pen/wvwdPxa

无法获得响应图像？

1 个答案: