Materializecss：如何使图像覆盖网格内的全宽

Question

我是 css 的新手，尝试使用物化。我创建了 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>

图像与行的宽度不同，如下所示。

如何让图片全宽和行一样？上图中的黄线是我想要用该图像覆盖的部分。如何做到这一点？谢谢！

Answer 1

<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>

这是您要求的答案。希望这会有所帮助 :) 如有任何问题或疑问，请回复我

Materializecss：如何使图像覆盖网格内的全宽

Materializecss: how to make image cover full width within grid

css

materialize