我想为移动视图减小我的图像大小 – Bootstrap。

huangapple go评论60阅读模式
英文:

I want to reduce the size of my image for mobile view - bootstrap

问题

I have a section with 2 columns, 1 for image and 1 for text.

The code for this is

<div class="row aboutRow">
    <div class="col-lg-3 col-sm-2 col-xs-3 col-md-3 text-center">
        <img src="assets/img/logoWithTagline.png" class="img-fluid logoAbout" alt="">
    </div>
    <div class="col-lg-9 col-sm-10 col-xs-9 col-md-9 pt-4 pt-lg-0 content d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="100">
        <div>
            <p>IHP Iyengars is serving people since 1990 with its various authentic south Indian food products. There are 6 products currently,
                Puliogare masala, Vangibath/Sabji masala, Bisibelebath masala, Chilli powder, Coriander powder and turmeric powder.
                All the products are free from any sorts of chemicals, colors, added flavours and preservatives.
            </p>
            <p>
                We take meticulous care right from sourcing raw materials, to testing, processing to production and packaging to branding.
                At every step, quality is ensured with perfection which gives it a higher nutritional value.
                The organization always aims at providing people with the best quality products at an economic price where anyone can afford
                to buy it and is very easy to prepare, quick to make besides, it has always maintained its superior quality and taste.
            </p>
            <p>
                Needless to mention, as these products have highest nutritional value, everyone prefers it.
                It has retained the grandmas homely taste along with its affordable price.

            </p>
        </div>
    </div>
</div>

In the mobile view, I want to reduce the size of the image because there is a carousel above it, and the image looks super huge and not looking good.

I want to reduce the size of this image to around 40% only for mobile view.

I tried to change the max-width of 100% in img-fluid but then the desktop view is getting altered. I want width to be 100% for desktop view and 40% for mobile view.

英文:

I have a section with 2 columns, 1 for image and 1 for text.

我想为移动视图减小我的图像大小 – Bootstrap。

The code for this is

&lt;div class=&quot;row aboutRow&quot;&gt;
       &lt;div class=&quot;col-lg-3 col-sm-2 col-xs-3 col-md-3 text-center&quot;&gt;
        &lt;img src=&quot;assets/img/logoWithTagline.png&quot; class=&quot; img-fluid logoAbout&quot; alt=&quot;&quot;&gt;
      &lt;/div&gt; 
      &lt;div class=&quot;col-lg-9 col-sm-10 col-xs-9 col-md-9 pt-4 pt-lg-0 content d-flex flex-column justify-content-center&quot; data-aos=&quot;fade-up&quot; data-aos-delay=&quot;100&quot;&gt; 
          &lt;div&gt;
          &lt;p&gt; IHP Iyengars is serving people since 1990 with its various authentic south Indian food products. There are 6 products currently, 
          Puliogare masala, Vangibath/Sabji masala, Bisibelebath masala, Chilli powder, Coriander powder and turmeric powder.
          All the products are free from any sorts of chemicals, colors, added flavours and preservatives.
        &lt;/p&gt;
        &lt;p&gt;
          We take meticulous care right from sourcing raw materials, to testing, processing to production and packaging to branding. 
          At every step, quality is ensured with perfection which gives it a higher nutritional value.
          The organization always aims at providing people with the best quality products at an economic price where anyone can afford 
          to buy it and is very easy to prepare, quick to make besides, it has always maintained its superior quality and taste.
        &lt;/p&gt;
        &lt;p&gt;
          Needless to mention, as these products have highest nutritional value, everyone prefers it. 
          It has retained the grandmas homely taste along with its affordable price. 
        
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

in the mobile view I want to reduce the size of the image, because there is a carousel above it and the image looks super huge and not looking good.

我想为移动视图减小我的图像大小 – Bootstrap。

I want to reduce the size of this image to around 40% only for mobile view.

I tried to change the max-width of 100% in img-fluid but then the desktop view is getting altered. I want width to be 100% for desktop view and 40% for mobile view.

答案1

得分: 1

你可以使用媒体查询来实现这个。你可以根据媒体查询定义一个宽度,如下所示:

@media (max-width: 767px) {
  .img-mob {
    width: 40%;
  }
}

然后,你可以在img元素中使用你的CSS类:

<img src="assets/img/logoWithTagline.png" class="img-fluid logoAbout img-mob" alt="">
英文:

You can use media queries for this. You define a width that is baed on media query as follows for example as below:

@media (max-width: 767px) {
  .img-mob {
    width: 40%;
  }
}

Then, you can use your css class with the img element:

&lt;img src=&quot;assets/img/logoWithTagline.png&quot; class=&quot;img-fluid logoAbout img-mob&quot; alt=&quot;&quot;&gt;

huangapple
  • 本文由 发表于 2023年5月25日 19:01:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/76331565.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定