使blockquote适应图像高度并添加风格化的报价

Question

我想修改我的html / css以获得类似红色的修改，添加两个风格化的引用，并使图像适应我的<blockquote></blockquote>元素的大小。

我的HTML是

<img src="presentation-images/bernardlee.jpg" style="width:300px";
class = "author"/>

<blockquote> [...] <mark>The project started with the philosophy that
much academic information should be freely available to anyone.</mark>
It aims to allow information sharing within internationally dispersed
teams, and the dissemination of information by support groups. -- Tim
Berners-Lee (1991)</blockquote>

我的css：

mark {
  background-color: #EBEBE4;
  color: black;
}


.author
{
  float:left;
  clear:both;
  margin:8px 8px 8px 8px;
}


 blockquote {
  display: block;
  margin: 1.5em 0 1.5em -1.5em;
  padding: .75em .5em .75em 1em;
  background: #fff;
  font-family: 'Crimson Text';
  border-left: 0.5em solid green;
  font-size: 0.8em;
  font-style: italic;
  line-height: 1.5;
  -webkit-box-shadow: 0 0 5px rgba(20,20,20,0.5);
  -moz-box-shadow: 0 0 5px rgba(20,20,20,0.5);
  box-shadow: 0 0 5px rgba(20,20,20,0.5);
}

你可以在这里看到小提琴：http://jsfiddle.net/h6m80gqb/

Answer 1

当你标记这个 HTML5 甚至奖励它时，我决定自己玩这个，尽管我的解决方案最终与克林特布朗的答案相同，但至少我没有在我的CSS中使用表格，而且我的引号更加风格化：P。

DOM结构

<div class="quote">
    <blockquote> [...] <mark>The project started with the philosophy that
    much academic information should be freely available to anyone.</mark>
    It aims to allow information sharing within internationally dispersed
    teams, and the dissemination of information by support groups. -- Tim
    Berners-Lee (1991)</blockquote>
</div>

我最终得到的是，如果您需要在生成的HTML中包含图片网址（您可能会这样做），您还需要为其添加单独的标记。

使图像适应盒子的大小

虽然灵活的盒子模型在这里有点矫枉过正，但它仍然非常出色。容器上的简单display:flex;和image元素上的flex: 0 0 20%;将使它获得容器的高度，并且容器的高度由{{1}中的文本量定义这意味着图像元素正在适应<blockquote>。接下来，您只需将图片设置为<blockquote>，并为图片设置background或background-size:cover;（如果您选择包含，则还需要添加background-size:contain;）。

background-repeat:no-repeat; background-position:right;

引号

当你在谈论程式化引用时我相信你想要的不仅仅是插入相关的字符，所以你可以.quote{ display:flex; box-shadow: 0 0 5px rgba(20,20,20,0.5); border-left: 0.5em solid green; margin:10px; } div:before{ content:''; display:block; flex: 0 0 30%; padding-left:0.5em; background:url('http://www.enlactualidad.com/wp-content/uploads/2013/03/Tim-Berners-Lee.jpg'); background-size:cover; background-position:center; } 使用大字体大小的第一个引用并内联第二个引用以下最终外观< / p>

使用字体和东西仍然可以大大增强所有内容的外观，但这确实带来了重点。

float

这个答案中的'缺陷'

就像布朗的回答一样，高度根据需要适应文本，但是宽度是固定的，这是由部分覆盖的图像以某种方式“解决”。一个适应宽度和高度的解决方案肯定需要Javascript，因为它是一种循环依赖（通过改变宽度，块引用的高度改变，因此图像高度的宽度改变，因此宽度更改，可以解决，但不能在HTML / CSS中解决。

Answer 2

比我第一次想到的只使用CSS更狡猾。这是我尝试的方法，但它还没有 -

＆＃13;

＆＃13;

blockquote {
  display: table;
  margin: 1.5em 0 1.5em -1.5em;
  padding: .75em .5em;
  font-family: 'Crimson Text';
  border-left: 0.5em solid green;
  font-size: 0.8em;
  font-style: italic;
  line-height: 1.5;
  -webkit-box-shadow: 0 0 5px rgba(20,20,20,0.5);
  -moz-box-shadow: 0 0 5px rgba(20,20,20,0.5);
  box-shadow: 0 0 5px rgba(20,20,20,0.5);
}

blockquote .image {
    display: table-cell;
    width: 20%;
}

blockquote .quote {
    margin-left: 10px;
}

blockquote .quote:before,
blockquote .quote:after {
    content: '"';
    color: red;
    font-size: 1.6em;
    line-height: 0;
    vertical-align: middle;
}

blockquote .quote:after {
    display: inline;
}

mark {
  background-color: #EBEBE4;
  color: black;
}

＆＃13;

<blockquote>
    <div class="image" style="background: url('http://www.enlactualidad.com/wp-content/uploads/2013/03/Tim-Berners-Lee.jpg') no-repeat center right; background-size: auto 100%;"></div>
    <div class="quote">[...] <mark>The project started with the philosophy that
much academic information should be freely available to anyone.</mark>
It aims to allow information sharing within internationally dispersed
teams, and the dissemination of information by support groups. -- Tim Berners-Lee (1991)</div>
</blockquote>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我会将<img>标记移到<blockquote>标记中并删除style=''属性。

我修改了这样的CSS：

mark {
    background-color: #EBEBE4;
    color: black;
}
.author {
    float:left;
    clear:both;
    margin:8px 8px 8px 8px;
}
blockquote {
    position:absolute;
    display: block;
    margin: 1.5em 0 1.5em -1.5em;
    padding: .75em .5em .75em 1em;
    background: #fff;
    font-family:'Crimson Text';
    border-left: 0.5em solid green;
    font-size: 0.8em;
    font-style: italic;
    line-height: 1.5;
    -webkit-box-shadow: 0 0 5px rgba(20, 20, 20, 0.5);
    -moz-box-shadow: 0 0 5px rgba(20, 20, 20, 0.5);
    box-shadow: 0 0 5px rgba(20, 20, 20, 0.5);
    width:100%;
    height:100px;
    padding-bottom:15px;
}
blockquote img {
    height:100%;
    width:auto;
}

得到特别的＆＃34;标记，您可以在<span>标记中添加引号并对其进行适当的样式设置。