时间戳

首页 > 解决方案 > 超出指定大小的扩展元素

html - 超出指定大小的扩展元素

问题描述

我有这个 html 和这个 css。

.entry-content > .greyfruitdrawing {
  height:2000px !important; 
  width:2000px !important; 
  margin-top:40px;
}

.redletters1 {
  font-size:40px; 
  opacity:0.7; 
  color:red;
  position:relative;
  top: 20px;
  font-weight: bolder;
  line-height:1.6;
  text-align:justify;
}
<div class="greyfruitdrawing">
  <img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" alt=""width="300" height="201"class="alignnone size-medium wp-image-6978"/>
</div>
<div class="redletters1">SOME TEXT.</div>

问题是a）它不会按照css告诉它的大小扩展。b) 元素以它们不应该的方式交互。调整greyfruitdrawing影响位置redletters1

网站：https ://4309.co.uk/about-us/

标签： htmlcss

解决方案

设置外部容器的高度和宽度，然后给图像本身设置 100% 的高度和宽度：

.container {
  text-align: center;
  width: 2000px;
  height: 2000px;
  margin-top: 40px;
}

.greyfruitdrawing img {
  height: 100%;
  width: 100%;
}

.redletters1 {
  font-size: 40px;
  color: rgba(255,0,0,0.7);
  font-weight: bolder;
  line-height: 1.6;
}
<div class="container">
  <div class="greyfruitdrawing">
    <img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" />
  </div>
  <div class="redletters1">SOME TEXT.</div>
</div>

推荐阅读