Question

将鼠标悬停在图像上方时，您会看到它将被文本块替换。

缩小浏览器时，您会看到字体大小保持不变，尽管我在EM中指定它应该使字体响应。

我需要悬停元素的布局在移动视图中保持不变，即我需要避免在缩小浏览器大小时出现的滚动条。任何想法如何实现这一目标？

＆＃13;

/*Programs*/

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
}

div.text-content {
  background: rgba(26,33,43,0.9);
  color: white;
  cursor: pointer;
  left: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 1.250em;
  font-family: Roboto;
  line-height: 1em;
  font-weight: 300;
  text-align: center;
  overflow-y: auto;
  box-sizing: border-box;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
 -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
  text-align: center;
  vertical-align: middle;
}

ul.img-list li:hover div.text-content {
  opacity: 1;
}

/* Events page */

/*Event link button*/

.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 1.750em;
font-size: 1.500em;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}

.btn:link {
    color: #ffffff;
    text-decoration: none;
}

.btn:visited {
  color: #1b1c16;
  text-decoration: none;
}

.btn:hover {
  background-color: #ffffff;
  color: #1b1c16 !important;
}

.btn:active {
  position: relative;
	top: 1px;
}

/*All events button*/

.evens_btn {
background: ;
}

.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 1.5em !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}

.events_btn>i{
color: #ffffff; 
margin-right: 15px; 
font-size: 3.125em;
}

.events_btn:link>i {
    color: #f9c70f;
}

.events_btn:visited>i {
  color: #ffffff;
  text-decoration: none;
}

.events_btn:hover>i {
 color: #f9c70f;
}

.events_btn:active>i {
  color: #f9c70f;
}

.events_btn:link>span {
    color: #f9c70f;
}

.events_btn:visited>span {
  color: #ffffff;
  text-decoration: none;
}

.events_btn:hover>span {
 color: #f9c70f ;
}

.events_btn:active>span {
  color: #f9c70f;
}

＆＃13;

<ul class="img-list">
  <li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />                              
    <div class="text-content">
      <div>
       <h5 style="color: white; font-size: 2.375em; font-family: Montserrat; font-weight: 600; line-height: 1em; letter-spacing: 0.125em;">WEBINAR<br/>ARCHIVE</h5>
       <hr style="border-top: 0.125em solid #ffffff; width: auto; margin: 0.625em 1.875em;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.
      <br>
      <a class="btn" style="color: white; text-align: center; margin-top: 0.625em; padding-top: 0.313em; padding-bottom: 0.313em; padding-left: 1.875em; padding-right: 1.875em; text-decoration: none; font-size: 1.500em; font-weight: 600; border: 3px solid white; letter-spacing: 0.125em;" href="http://www.google.com/" target="_blank">READ MORE</a>
      </div>
    </div>
  </li>
</ul>

＆＃13;

Answer 1

您只需在vw而非em

中设置字体大小即可

＆＃13;

/*Programs*/

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
}

div.text-content {
  background: rgba(26,33,43,0.9);
  color: white;
  cursor: pointer;
  left: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 3vw;
  font-family: Roboto;
  line-height: 1em;
  font-weight: 300;
  text-align: center;
  overflow-y: auto;
  box-sizing: border-box;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
 -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
  text-align: center;
  vertical-align: middle;
}

ul.img-list li:hover div.text-content {
  opacity: 1;
}

/* Events page */

/*Event link button*/

.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 1.750em;
font-size: 1.500em;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}

.btn:link {
    color: #ffffff;
    text-decoration: none;
}

.btn:visited {
  color: #1b1c16;
  text-decoration: none;
}

.btn:hover {
  background-color: #ffffff;
  color: #1b1c16 !important;
}

.btn:active {
  position: relative;
	top: 1px;
}

/*All events button*/

.evens_btn {
background: ;
}

.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 1.5em !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}

.events_btn>i{
color: #ffffff; 
margin-right: 15px; 
font-size: 3.125em;
}

.events_btn:link>i {
    color: #f9c70f;
}

.events_btn:visited>i {
  color: #ffffff;
  text-decoration: none;
}

.events_btn:hover>i {
 color: #f9c70f;
}

.events_btn:active>i {
  color: #f9c70f;
}

.events_btn:link>span {
    color: #f9c70f;
}

.events_btn:visited>span {
  color: #ffffff;
  text-decoration: none;
}

.events_btn:hover>span {
 color: #f9c70f ;
}

.events_btn:active>span {
  color: #f9c70f;
}

＆＃13;

<ul class="img-list">
  <li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />                              
    <div class="text-content">
      <div>
       <h5 style="color: white; font-size: 2.375em; font-family: Montserrat; font-weight: 600; line-height: 1em; letter-spacing: 0.125em;">WEBINAR<br/>ARCHIVE</h5>
       <hr style="border-top: 0.125em solid #ffffff; width: auto; margin: 0.625em 1.875em;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.
      <br>
      <a class="btn" style="color: white; text-align: center; margin-top: 0.625em; padding-top: 0.313em; padding-bottom: 0.313em; padding-left: 1.875em; padding-right: 1.875em; text-decoration: none; font-size: 1.500em; font-weight: 600; border: 3px solid white; letter-spacing: 0.125em;" href="http://www.google.com/" target="_blank">READ MORE</a>
      </div>
    </div>
  </li>
</ul>

＆＃13;

修复字体响应

1 个答案: