我是 css 的新手，尝试使用 materialize。我创建了 2 列的行。左列用于图像，右列用于文本。这是我的 html 结构
<div class="section">
<div class="row">
<div class="col s12 m12 l8">
<img src="imgae_url_here.jpg" alt="" class="responsive-img">
</div>
<div class="col s12 m12 l4 headline-right">
<p class="category">CHROMECAST</p>
<h2 class="feat-article-title">Here’s to five years of Chromecast</h2>
<p class="feat-article-summary">Lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet...</p>
<a href="#!" class="btn grey lighten-4 grey-text text-darken-3 z-depth-1 waves-effect btn-headline">READ ARTICLE<i class="material-icons right">arrow_forward</i> </a>
</div>
</div>
</div>
图像与行的宽度不同，如下所示。
如何让图片全宽和行一样？上图中的黄线是我想要用该图像覆盖的部分。如何做到这一点？谢谢!
最佳答案
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<style>
</style>
<body>
<div class="row no-padding">
<div class="col s12 m12 l8" style="overflow:hidden">
<img src="https://placeimg.com/1080/480/any" style="margin-left:-12px">
</div>
<div class="col s12 m12 l4 headline-right">
<p class="category">CHROMECAST</p>
<h2 class="feat-article-title">Here’s to five years of Chromecast</h2>
<p class="feat-article-summary">Lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet...</p>
<a href="#!" class="btn grey lighten-4 grey-text text-darken-3 z-depth-1 waves-effect btn-headline">READ ARTICLE<i class="material-icons right">arrow_forward</i> </a>
</div>
</body>
</html>这是您要求的答案。希望这会有所帮助 :) 如有任何问题或疑问，请回复我
关于css - 物化 : how to make image cover full width within grid，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51555645/