英文:
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.
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>
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.
答案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:
<img src="assets/img/logoWithTagline.png" class="img-fluid logoAbout img-mob" alt="">
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论