adapt blockquote to the image height and add stylized quote - html

Question

I want to modify my html/css to obtain something like these modification in red, adding two stylized quote, and adapt image to the size of my <blockquote></blockquote> element.
My html is
<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>
My 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);
}
You can see fiddle here : http://jsfiddle.net/h6m80gqb/

Answer 1

As you tagged this HTML5 and even awarded a bounty on it I decided to have a play with this myself, despite my solution ending up with the same weakness as Clint Brown's answer has, but at least I am not using tables in my css and my quotes are a bit more stylized :P .
The DOM structure
<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>
Is what I ended up with, if you need to include the image url in the generated HTML (as you likely will), you will need to put a separate tag for that as well.
Getting the image to adapt to the size of the box
Although flexible box model is a bit overkill here, it works splendidly none the less. A simple display:flex; on the container and flex: 0 0 20%; on the image element will cause it to get the height of the container and as the height of the container is defined by the amount of text in the <blockquote> this means the image element is adapting to the <blockquote>. Next all you need is setting the image as a background and either background-size:cover; or background-size:contain; for the image (if you choose contain you would want to add background-repeat:no-repeat; background-position:right; as well).
.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;
}
The quotes
As you were talking about stylized quotes I believe you wanted more than just inserting the relevant character, so instead you can float the first quote with a big font size and inline the second to give the following final look
Playing around with fonts and stuff could still greatly enhance the look of everything, but this does bring the point across.
blockquote:before,blockquote:after{
display:block;
font-size:60px;
height:0.5em;
overflow:hidden;
position:relative;
top:-0.15em;
color:red;
margin-bottom:-0.15em;
}
blockquote:before{
float:left;
padding-right:10px;
content:'“';
}
blockquote:after{
content:'”';
display:inline-block;
padding-left:10px;
vertical-align:top;
}
The 'flaw' in this answer
Just like Brown's answer the height adapts to the text as required, however the width is fixed which is somehow 'solved' by the image being partially covered. A solution that would adapt both the width and the height would quite definitely require Javascript as it is sort of circular dependency (by changing the width, the height of the blockquote changes, thus the width of the height of the image changes, thus the width changes, which can be resolved, but not in HTML/CSS).

Answer 2

Trickier than I first thought using only CSS. This is the approach I tried but it's not quite there yet -
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;
}
<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>

Answer 3

I would move the <img> tag into the <blockquote> tag and remove the style='' attribute.
I modified the CSS like this:
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;
}
To get special " marks, you could have the quotes in a <span> tag and style them appropriately.