1105268-2-min-max-dimensions.html (955B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .wrapper { 7 display: inline-block; 8 vertical-align: top; 9 margin: 20px; 10 } 11 .outer { 12 height: 250px; 13 width: 200px; 14 border: 10px solid #ddd; 15 } 16 .inner { 17 overflow: hidden; 18 background: yellow; 19 } 20 .test1 { 21 min-width: 100px; 22 max-width: 100px; 23 min-height: 150px; 24 max-height: 150px; 25 } 26 .test2 { 27 min-width: 150px; 28 max-width: 150px; 29 min-height: 100px; 30 max-height: 100px; 31 } 32 .lr { 33 writing-mode: vertical-lr; 34 } 35 .rl { 36 writing-mode: vertical-rl; 37 } 38 </style> 39 40 </head> 41 42 <body> 43 44 <div class="wrapper"> 45 <div class="outer"> 46 <img class="inner test1 lr" src="foo"> 47 </div> 48 </div> 49 50 <div class="wrapper"> 51 <div class="outer"> 52 <img class="inner test1 rl" src="foo"> 53 </div> 54 </div> 55 56 <br> 57 58 <div class="wrapper"> 59 <div class="outer"> 60 <img class="inner test2 lr" src="foo"> 61 </div> 62 </div> 63 64 <div class="wrapper"> 65 <div class="outer"> 66 <img class="inner test2 rl" src="foo"> 67 </div> 68 </div> 69 70 </body> 71 </html>