css - how can I clip an <img> inside a <blockquote> -
i trying limit horizontal size of whatever load in blockquote (i not control content in blockquote know it's going screw layout). here reduced testcase of page layout looks like:
<html> <body> <div style="width: 800px; background-color: #ff0000;"> <div style="display: table;"> <div style="display: table-row;"> <blockquote style="overflow:hidden;"> <div style="width: 1000px; height: 400px;background-color: #00ff00;"></div> </blockquote> </div> </div> </div> </body> </html> the size of blockquote implicitely set through width on 1 of parent elements , table container used layout blockquote itself.
now, if try copy/paste above html test.html file, see entire inner div displayed blue, beyond boundaries of red background. make sure gets cliped @ background boundaries.
the question then: there way without changing structure of html layout , without having set again explicit width on blockquote (i cannot latter because not know real size of blockquote in real layout because there other elements within outer div take unknown amount of horizontal space) ?
edit
earlier, naively tried following. added column in table illustrate fact not know how space other elements in table suck up.
<html> <body> <div style="width: 800px; background-color: #ff0000;"> <div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell;"> <blockquote style="overflow:hidden;" id="inner"> <div style="width: 1000px; height: 400px;background-color: #00ff00;"></div> </blockquote> </div> <div style="display: table-cell;"> <div style="width:100px; background-color:#0000ff; height: 300px;"></div> </div> </div> </div> </div> <script> var width = document.getelementbyid('inner').parentnode.offsetwidth; console.log(width); </script> </body> </html>
in order overflow: hidden; work have set dimensions of element explicitly. so, yes, sorry, have specify width on blockquote.
if allowed to, can use javascript determine width of parent element has set width , set width of blockquote accordingly.
here's example of how might work, using current markup:
var root = document.getelementsbytagname('div')[0], block = document.getelementsbytagname('blockquote'), i; (i = 0; < block.length; += 1) { block[i].style.maxwidth = root.style.width; } however, vastly improved if give div that's got set width class name or id. check out this fiddle see how work.
Comments
Post a Comment