如何使圖像響應？ HTML/CSS

Question

我有以下圖片：

 .aligned { display: flex; align-items: top; }.p { padding: 15px; } img { border: 5px solid #555; } blockquote { font-family: Georgia, serif; font-size: 18px; font-style: italic; width: 800px; margin: 0.25em 0; padding: 0.35em 40px; line-height: 1.45; position: relative; color: #383838; } blockquote:before { display: block; padding-left: 10px; content: "\201C"; font-size: 80px; position: absolute; left: -20px; top: -20px; color: #7a7a7a; } blockquote cite { color: #999999; font-size: 14px; display: block; margin-top: 5px; } blockquote cite:before { content: "\2014 \2009"; }

 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" align="left" width="370" height="500"> <div class="aligned"> <div class="p"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla, a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla, a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla, a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo. </p> <blockquote> Nothing Is Impossible. The Word Itself Says 'IM Possible' <cite>Audrey Hepburn</cite> </blockquote> </div>

我將如何使圖像響應？

預計 Output：

看看圖像是如何定位的？ 它不適合整個頁面，因為它的寬度和高度都被縮短了。 我希望我上面的圖像在較小的設備上查看時就像上面的圖像一樣，否則，它應該像上面的 output 中顯示的那樣。

我嘗試更改圖像的寬度和高度並使用媒體查詢但它不起作用，所以我刪除了媒體查詢。 有什么建議么？

Answer 1

在您的圖像標記中，您有一個實際上已棄用的屬性align="left" 。
請參閱： https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/align

從圖像標簽中刪除align="left"后，這是一種方法：

 /* Added code */ img { display: block; margin: 0 auto; max-width: 80%; height: auto; } @media all and (min-width: 768px) { img { float: left; height: 200px; /* image height for larger screen only */ } } /* Your sample code */.aligned { display: flex; align-items: top; }.p { padding: 15px; } img { border: 5px solid #555; } blockquote { font-family: Georgia, serif; font-size: 18px; font-style: italic; width: 800px; margin: 0.25em 0; padding: 0.35em 40px; line-height: 1.45; position: relative; color: #383838; } blockquote:before { display: block; padding-left: 10px; content: "\201C"; font-size: 80px; position: absolute; left: -20px; top: -20px; color: #7a7a7a; } blockquote cite { color: #999999; font-size: 14px; display: block; margin-top: 5px; } blockquote cite:before { content: "\2014 \2009"; }

 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500"> <div class="aligned"> <div class="p"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla, a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla, a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla, a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo. </p> <blockquote> Nothing Is Impossible. The Word Itself Says 'IM Possible' <cite>Audrey Hepburn</cite> </blockquote> </div>

Answer 2

為父元素提供一個使用媒體查詢更改的flex布局。 在這種情況下，您不需要使用浮點數。

您缺少<div class='aligned'>的結束div標記

您還應該讓blockquote的寬度為auto ，直到屏幕達到您希望它在桌面上顯示的大小。

 .container { display: flex; flex-flow: column nowrap; align-items: center; } @media (min-width: 768px) {.container { flex-flow: row nowrap; align-items: flex-start; } }.aligned { display: flex; align-items: flex-start; }.p { padding: 15px; } img { border: 5px solid #555; } blockquote { font-family: Georgia, serif; font-size: 18px; font-style: italic; max-width: 100%; margin: 0.25em 0; padding: 0.35em 40px; line-height: 1.45; position: relative; color: #383838; } @media (min-width: 800px) { blockquote { width: 800px; } } blockquote:before { display: block; padding-left: 10px; content: "\201C"; font-size: 80px; position: absolute; left: -20px; top: -20px; color: #7a7a7a; } blockquote cite { color: #999999; font-size: 14px; display: block; margin-top: 5px; } blockquote cite:before { content: "\2014 \2009"; }

 <div class="container"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" align="left" width="370" height="500"> <div class="aligned"> <div class="p"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla, a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla, a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla, a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo. </p> <blockquote> Nothing Is Impossible. The Word Itself Says 'IM Possible' <cite>Audrey Hepburn</cite> </blockquote> </div> </div> </div>